Альтернатива if, else if, else if, else if и т. Д. В javascript

Question

У меня есть следующий код, который в зависимости от параметра URL изменяется, а затем скрывает опцию выбора в форме.т.е. www.example.com?type=images

В конечном итоге будет более 20 различных параметров.Я хотел бы узнать о лучшем способе, чем иметь огромное количество других вещей.Просто набросок того, как это сделать, хорошо, я новичок в этом, поэтому я хотел бы иметь возможность взять ответ и извлечь из него урок.Спасибо.

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

Чтобы не повторять код, я напишу ваш код следующим образом с таблицей поиска для номера индекса и без повторяющегося кода для каждой опции:

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

тогда ...

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

Если идентификаторы на самом деле все одинаковые, то, естественно, вы должны кэшировать эти элементы, а не выбирать их заново, и единственное, что вам нужно будет сохранить в таблице, это номер индекса.

---

Похоже, единственной уникальной частью является индекс. Если так, сделайте это:

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

Answer 4

может быть, switch заявление поможет вам

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

также, установите selectDiv перед всем, чтобы уменьшить количество кода:)

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

Answer 5

вы можете использовать массив функций, аналогично когда-либо популярному словарному решению в 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]();

Answer 6

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