javascript - 以更好的方式将不同的样式应用于不同的元素？

Question

我有这个功能，它将 css 样式 + 几个插件 + 隐藏/显示到一堆元素。这些元素是“item”元素的子元素，并且具有包含此“item”编号的 id。这些规则也适用于不同类型的元素。它工作正常，但它是可怕的。你能推荐几个更好的方法吗？

注意:PackageElement 和duration 是全局变量。

function HideItemElements(Type,ItemNum) {
                    switch (Type) {
                        case 'HW':
                            $("#Country" + ItemNum).addClass("Chzn").show().chosenImage({ width: "204px", no_results_text: "Oops, nothing found!"});                         
                            $("#Countrylabel" + ItemNum).show();
                            $("#LineOptions" + ItemNum).text("Edit Support");
                            $("#ItemImage" + ItemNum).attr("src", "Styles/images/u79_normal.png");
                            break;
                        case 'SW':
                            if (PackageElement.attr("name") == "HW") {
                            }
                            else {
                                $("#Serials" + ItemNum).show();
                                $("#Serialslabel" + ItemNum).show();
                                $("#OtherOpts" + ItemNum)
                                .attr("style", "height:113px");
                            }
                            $("#ItemImage" + ItemNum).attr("src", "Styles/images/u131_normal.png");
                            break;
                        case 'SERVICE':
                            $("#ItemImage" + ItemNum).attr("src", "Styles/images/u149_normal.png");
                            $("#LineOptions" + ItemNum).hide();
                            break;
                        case 'CONTRACT':
                            if (PackageElement.attr("name") == "HW") {
                                $("#Countrylabel" + ItemNum).hide();
                                $("#Country" + ItemNum).hide().removeClass("Chzn");
                                $("#OtherOpts" + ItemNum).children().eq(2).hide();
                                if (duration.get_selectedItem().get_value() == "Other") {
                                    $("#ItemStarting" + ItemNum).show()
                                    .datepicker({ dateFormat: "dd-mm-yy" })
                                    .datepicker("setDate", "+0d")
                                    .attr("style", "top:9px");
                                    $("#ItemStartinglabel" + ItemNum).show()
                                    .attr("style", "top:-4px");
                                    $("#ItemEnd" + ItemNum).show()
                                    .datepicker({ dateFormat: "dd-mm-yy" })
                                    .datepicker("setDate", "+1y")
                                    .attr("style", "top:52px");
                                    $("#ItemEndlabel" + ItemNum).show()
                                    .attr("style", "top:38px");
                                    $("#OtherOpts" + ItemNum)
                                    .attr("style", "height:82px");
                                }
                                else {
                                    $("#ItemDuration" + ItemNum).show().addClass("Chzn").chosen({ width: "204px", disable_search: true });
                                    $("#ItemDurationlabel" + ItemNum).show();
                                }
                            }
                            else if (PackageElement.attr("name") == "SW") {
                                $("#Serials" + ItemNum).hide();
                                $("#Serialslabel" + ItemNum).hide();
                                if (duration.get_selectedItem().get_value() == "Other") {
                                    $("#ItemStarting" + ItemNum).show()
                                     .datepicker({ dateFormat: "dd-mm-yy" })
                                     .datepicker("setDate", "+0d")
                                     .attr("style", "top:9px");
                                    $("#ItemStartinglabel" + ItemNum).show()
                                    .attr("style", "top:-4px");
                                    $("#ItemEnd" + ItemNum).show()
                                    .datepicker({ dateFormat: "dd-mm-yy" })
                                    .datepicker("setDate", "+1y")
                                    .attr("style", "top:52px");
                                    $("#ItemEndlabel" + ItemNum).show()
                                    .attr("style", "top:38px");
                                    $("#OtherOpts" + ItemNum)
                                    .attr("style", "height:82px");
                                }
                                else {
                                    $("#ItemDuration" + ItemNum).show()
                                    .attr("style", "top:9px").addClass("Chzn").chosen({ width: "204px", disable_search: true });
                                    $("#ItemDurationlabel" + ItemNum).show();
                                    $("#ItemStartinglabel" + ItemNum).show()
                                    .attr("style", "top:38px");
                                    $("#ItemStarting" + ItemNum).show()
                                    .datepicker({ dateFormat: "dd-mm-yy" })
                                    .datepicker("setDate", "+0d")
                                    .attr("style", "top:52px");
                                    $("#OtherOpts" + ItemNum)
                                    .attr("style", "height:82px");
                                } 
                            }
                            else {              
                                if (duration.get_selectedItem().get_value() == "Other") {
                                    $("#ItemStarting" + ItemNum).show()
                                     .datepicker({ dateFormat: "dd-mm-yy" })
                                     .datepicker("setDate", "+0d")
                                     .attr("style", "top:9px");
                                    $("#ItemStartinglabel" + ItemNum).show()
                                    .attr("style", "top:-4px");
                                    $("#ItemEnd" + ItemNum).show()
                                    .datepicker({ dateFormat: "dd-mm-yy" })
                                    .datepicker("setDate", "+1y")
                                    .attr("style", "top:52px");
                                    $("#ItemEndlabel" + ItemNum).show()
                                    .attr("style", "top:38px");
                                    $("#OtherOpts" + ItemNum)
                                    .attr("style", "height:208px");
                                }
                                else {
                                    $("#ItemDuration" + ItemNum).show()
                                    .attr("style", "top:9px").addClass("Chzn").chosen({ width: "204px", disable_search: true });
                                    $("#ItemDurationlabel" + ItemNum).show();
                                    $("#ItemStartinglabel" + ItemNum).show()
                                    .attr("style", "top:38px");
                                    $("#ItemStarting" + ItemNum).show()
                                    .datepicker({ dateFormat: "dd-mm-yy" })
                                    .datepicker("setDate", "+0d")
                                    .attr("style", "top:52px");
                                    $("#OtherOpts" + ItemNum)
                                    .attr("style", "height:208px");
                                }
                                $("#Serials" + ItemNum).show()
                                .attr("style", "top:96px; left: -97px; width: 296px;");
                                $("#Serialslabel" + ItemNum).show()
                                .attr("style", "left:-97px; top:84px");
                            }
                            $("#LineOptions" + ItemNum).hide();
                            $("#ItemImage" + ItemNum).attr("src", "Styles/images/u77_normal.png");
                            break;
                        case 'ACCESSORY':
                            $("#LineOptions" + ItemNum).hide();
                            $("#ItemImage" + ItemNum).attr("src", "Styles/images/u90_normal.png");
                            break;
                    }

如果您需要我在问题中添加一些内容 - 请在评论中提出要求。

编辑:主要问题是“契约(Contract)”案例。

Answer 1

如果你有单独的函数来处理每个进程，你也可以显着地整理事情，例如:

$("#ItemStarting" + ItemNum).show()
  .datepicker({ dateFormat: "dd-mm-yy" })
  .datepicker("setDate", "+0d")
  .attr("style", "top:52px");

是在你的 switch 中出现 5 次的东西，你可以创建一个函数并像这样处理它

function setup_item_starting(ItemNum, date_format, set_date, top_px) {
    $("#ItemStarting" + ItemNum).show()
      .datepicker({ dateFormat: date_format })
      .datepicker("setDate", set_date)
      .css("top", top_px);
}

然后简单地执行如下调用:

setup_item_starting(ItemNum, "dd-mm-yy", "+0d", "52px");

在您的 switch 语句中，每当您需要执行更改时。

对你的其他元素做同样的事情，比如 ItemDurationlabel ItemDuration ItemEnd 等。你会很快砍掉你的 switch 语句缩小到合理的尺寸。