我有以下代码,这取决于url参数更改,然后隐藏表单上的选择选项。即www.example.com?type=images
最终将有超过20个不同的参数。我想知道一个更好的方法,而不是拥有大量的elses。只是概述了如何做到这一点很好,我是新手,所以我希望能够得到答案并从中学习。感谢。
var type = getURLparameter('type'); //from another function
if (type == "images"){
var selectDiv =('divid');
var selectField = ('selectid');
document.getElementById(selectField).options[1].selected=true;
document.getElementById(selectDiv).style.visibility="hidden";
}
else if (type == "pizza") {
var selectDiv =('divid');
var selectField = ('selectid');
document.getElementById(selectField).options[2].selected=true;
document.getElementById(selectDiv).style.visibility="hidden";
}
else (type == "cheese") {
var selectDiv =('divid');
var selectField = ('selectid');
document.getElementById(selectField).options[3].selected=true;
document.getElementById(selectDiv).style.visibility="hidden";
}
答案 0 :(得分:10)
为了不重复代码,我会用这样的代码写一个索引号的查找表,并且每个选项都没有重复的代码:
var typeNum = {
images: 1,
pizza: 2,
cheese: 3
};
var type = getURLparameter('type');
if (type in typeNum) {
document.getElementById('selectid').options[typeNum[type]].selected = true;
document.getElementById('divid').style.visibility = "hidden";
}
答案 1 :(得分:6)
使用开关:
var selectDiv = document.getElementById('divid'),
selectField = document.getElementById('selectid');
switch(type){
case "images":
selectField.options[1].selected=true;
selectDiv.style.visibility="hidden";
break;
case "pizza":
selectField.options[2].selected=true;
selectDiv.style.visibility="hidden";
break;
case "cheese":
selectField.options[3].selected=true;
selectDiv.style.visibility="hidden";
break;
}
答案 2 :(得分:4)
将它们放在一个物体中,然后查找你需要的物体。
var type_table = {
images: {
div_id: 'somevalue',
select_id: 'somevalue',
option_index: 0
},
pizza: {
div_id: 'somevalue',
select_id: 'somevalue',
option_index: 1
},
cheese: {
div_id: 'somevalue',
select_id: 'somevalue',
option_index: 2
}
};
...然后
var the_type = type_table[ type ];
document.getElementById(the_type.select_id).options[the_type.option_index].selected=true;
document.getElementById(the_type.div_id).style.visibility="hidden";
如果ID实际上都是相同的,那么你自然应该缓存这些元素而不是重新选择它们,并且你需要在表中存储的唯一内容就是索引号。
听起来唯一独特的部分是索引。如果是这样,请执行以下操作:
var type_table = {
images:0,
pizza:1,
cheese:2, // and so on
};
var the_div = document.getElementById('div_id');
var the_select = document.getElementById('select_id');
然后在运行代码的函数内...
the_select.options[ type_table[ type ] ].selected=true;
the_div.style.visibility="hidden";
答案 3 :(得分:3)
也许switch
声明可以帮助你
http://www.tutorialspoint.com/javascript/javascript_switch_case.htm
另外,在所有内容之前设置selectDiv
以减少代码量:)
switch(type) {
case 'images':
//blah
break;
}
答案 4 :(得分:0)
document.getElementById(selectField).options[(type == "images" ? 1 : (type == "pizza" ? 2 : 3))].selected=true;
document.getElementById(selectDiv).style.visibility="hidden";
答案 5 :(得分:0)
你可以使用一系列函数,类似于c#中常用的字典解决方案,
var mySwitch={};
mySwitch['images'] = function(){
var selectDiv =('divid');
var selectField = ('selectid');
document.getElementById(selectField).options[1].selected=true;
document.getElementById(selectDiv).style.visibility="hidden";
};
mySwitch['pizza'] = function(){...};
然后做
mySwitch[type]();