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

ProgramBox

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

Post author:admin
Запись опубликована:19 июля, 2022
Post category:Вопросы по программированию

#javascript

#javascript #оператор переключения #if-оператор

Вопрос:

У меня есть следующий код, который в зависимости от параметра url изменяется, а затем скрывает опцию выбора в форме. ie 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";
}

1. Как насчет switch ?

2. Я бы отформатировал ваш HTML и тому подобное, чтобы вам не требовались особые случаи для всего.

3. Я должен согласиться с комментарием Blender. Если ваша структура выполнена хорошо, вам не нужны if-elses или оператор switch .

4. Мне кажется, что в приведенном примере кода единственное, что меняется в каждом случае, — это индекс в .options коллекции, поэтому используете ли вы переключатель или сохраняете структуру if / else if / else if строка для выбора подходящей опции — это единственное, что вам нужно в каждом случае — остальные тристроки могут быть перемещены до первого if (или до переключателя, если вы, ну … переключитесь на это).

5. Как бы я это сделал? Это всего лишь одно поле выбора.

Ответ №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";
}

Ответ №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;
}

1. Здесь повторяется код, который может быть удален из оператора switch .

2. Отрицательный голос был не мной. Я действительно думаю, что отрицательные голоса должны потребовать некоторого объяснения.

Ответ №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";

Ответ №4:

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

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

кроме того, установите selectDiv перед всем, чтобы уменьшить объем кода 🙂

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

1. @PHPBree: Вы могли бы предложить приличную ссылку или две , чтобы tekknolagi знал, где лучше искать в будущем.

2. @muistoosh это правда, но я только что погуглил javascript switch statement , и W3Schools — первое, что появилось … я думаю, это то, что я получаю за лень. Опять же, я ответил первым! и страница w3schools была правильной!

3. Это часть проблемы с w3fools: они использовали систему, чтобы попасть на вершину рейтинга Google, чтобы люди невольно находили их и предполагали, что они связаны с реальным W3. Добавьте MDN в закладки и es5.github.com ссылки и перейти прямо туда в будущем; любой поиск в HTML или CSS в Google должен включать «site:w3.org » чтобы получить настоящую вещь.

4. @muistoosh черт! не знал этого о 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]();

Ответ №7:

Я знаю, что это очень старый вопрос, но хотел предложить альтернативное решение, мне нравится этот подход, потому что он лаконичный, но при этом очень легко читаемый

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

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

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