在 javascript 中替代 if、else if、else if、else if 等答案

【问题标题】：Alternative to if, else if, else if, else if, etc in javascript在 javascript 中替代 if、else if、else if、else if 等
【发布时间】：2011-11-29 01:16:16
【问题描述】：

我有以下代码，它取决于 url 参数的变化，然后隐藏表单上的选择选项。即 www.example.com?type=images

最终会有超过 20 个不同的参数。我想知道比拥有大量 if else 更好的方法。只是一个如何做的大纲很好，我是新手，所以我希望能够接受答案并从中学习。谢谢。

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";
}

【问题讨论】：

switch 呢？
我会格式化你的 HTML 等，这样你就不需要所有的特殊情况了。
我必须同意 Blender 的评论。如果你的结构做得很好，你不应该需要 if-elses 或 switch 语句。
在我看来，在给出的示例代码中，在每种情况下唯一改变的是.options集合的索引，所以无论您使用开关还是保留if/else if/else if结构选择适当的选项是每种情况下唯一需要的东西 - 其他三行可以在第一个IF（或在交换机之前，如果您，请切换到该）。跨度>
我该怎么做？这只是一个选择字段。

标签： javascript switch-statement if-statement

【解决方案1】：

为了不重复代码，我会这样编写您的代码，其中包含索引 num 的查找表，并且每个选项都没有重复代码：

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";
}

【讨论】：

我很确定这就是我要找的。谢谢！

【解决方案2】：

使用开关：

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;
}

【讨论】：

这里的重复代码可以移出 switch 语句。
投反对票的不是我。我确实认为反对票应该需要一些解释。

【解决方案3】：

将它们放在一个对象中并查找您需要的对象。

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";

【讨论】：

也使用了一些这个解决方案。如果我有更多的代表。我肯定会投赞成票。感谢您的帮助。

【解决方案4】：

也许switch 声明会对您有所帮助

http://www.tutorialspoint.com/javascript/javascript_switch_case.htm

另外，在一切之前设置selectDiv 以减少代码量:)

switch(type) {
    case 'images':
        //blah
        break;
}

【讨论】：

@PHPBree：您本可以提供decent reference 或two，以便tekknolagi 知道将来可以寻找更好的地方。
@muistooshort 这是真的，但我只是用谷歌搜索了javascript switch statement，W3Schools 是第一个出现的......我猜这就是我因为懒惰而得到的。话又说回来，我确实先回答了！ w3schools 页面是对的！
这是 w3fools 问题的一部分：他们利用系统游戏让自己在 Google 排名中名列前茅，因此人们在不知不觉中找到了他们，并认为他们与真正的 W3 相关联。收藏 MDN 和 es5.github.com 链接，以后直接去；任何 HTML 或 CSS 搜索都应包含“site:w3.org”以获取真实内容。
@muistooshort 该死！不知道 w3fools 和那些是很好的资源！

【解决方案5】：

document.getElementById(selectField).options[(type == "images" ? 1 : (type == "pizza" ? 2 : 3))].selected=true;
document.getElementById(selectDiv).style.visibility="hidden";

【讨论】：

【解决方案6】：

你可以使用一个函数数组，类似于 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]();

【讨论】：