我有这个功能，它将css样式+几个插件+ hide / show应用于一堆元素。 这些元素是“item”元素的子元素，并且具有包含此“item”数字的id。这些规则也适用于不同类型的项目。 它工作正常，但它是可怕的。你能建议几种更好的方法吗？
注意： PackageElement 和持续时间是全球变种。
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;
}
如果您需要我在问题中添加内容，请在评论中提出。
编辑：主要问题是“合同”案例。
答案 0 :(得分：1)
如果你有单独的功能来处理每个进程，你也可以大大整理一下，例如：
$("#ItemStarting" + ItemNum).show()
.datepicker({ dateFormat: "dd-mm-yy" })
.datepicker("setDate", "+0d")
.attr("style", "top:52px");
在您的交换机中出现5次，您可以创建一个功能＆amp;像这样处理它
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");
。
为您的其他元素执行相同类型的操作，例如ItemDurationlabel ItemDuration ItemEnd等等。您可以快速将切换语句切割为合理的大小。
答案 1 :(得分：1)
您正尝试在javascript中根据运行时状态更改DOM / HTML表示。看起来你正在寻找一个绑定框架，比如KnockoutJs或AngularJs！
绑定框架完全符合您的需要：它将行为移动到声明中（参见示例），以便您之后只需操纵您的javascript运行时状态。这样做，可以释放您的双手来处理您的businesslogic，而无需始终处理事件处理程序和DOM操作。绑定框架将为您反映DOM中的任何运行时状态更改。
这也是＆＃39;现代＆＃39;这些天走的路，特别是在大型（企业？）项目中。特别是AngularJs由于其稳健性而目前正在大受欢迎（提供整体解决方案，包括依赖注入，路由，服务管理等）。
Javascript运行时状态：
var countries = [{ name: 'Germany', type: 'HW' }, { name: 'Iran', type: 'SW' }];
带行为绑定的HTML
<ul data-bind="foreach: countries">
<li data-bind="text: $data.name, css: { Chzn: $data.type == 'HW' }"></li>
</ul>
现在，对此数据的任何更改都将自动导致对HTML进行更改。 AngularJs将拥有类似的设施。