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

Question

我有以下代码，它根据 url 参数更改，然后隐藏表单上的 select 选项。 即 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";
}

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

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

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

Answer 4

也许switch语句会帮助你

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

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

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

Answer 5

我知道这是一个非常古老的问题，但想提供一个替代解决方案，我喜欢这种方法，因为它简洁明了，同时仍然很容易阅读

const type = getURLparameter('type'); //from another function
const images = type === 'images' && 1
const pizza = type === 'pizza' && 2
const cheese = type === 'cheese' && 3
const option = images || pizza || cheese

document.getElementById(selectField).options[option].selected=true;

Answer 6

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

Answer 7

您可以使用一系列函数，类似于 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(){...};