Несколько IF и ELSE IF в JavaScript - PullRequest
Новая
       19

Несколько IF и ELSE IF в JavaScript

4 голосов
/ 13 июля 2010

Итак, что будет добавлено в этот массив, зависит от нескольких радиобоксов.У меня есть это для стандартных и кресел-колясок: 

if(document.getElementById('standardseat').checked) {
  //Standard seat is checked
seatsArray.push(e.posX, e.posY);
}
else if(document.getElementById('wheelchairseat').checked) {
  //Wheelchair seat is checked
seatsArray.push("Wheelchair " + e.posX, e.posY);
}

И это эквивалентный код формы: 

<input id="standardseat" type="radio" name="seat" value="standard" /> Standard seat
<input id="wheelchairseat" type="radio" name="seat" value="wheelchair" /> Wheelchair seat

Но я хочу добавить еще несколько радиобоксов, которыеотдельно от стандартного сиденья / кресла-коляски: 

<input id="backnave" type="radio" name="area" value="backnave" /> Back Nave
<input id="frontnave" type="radio" name="area" value="frontnave" /> Front nave
<input id="middlenave" type="radio" name="area" value="middlenave" /> Middle nave

И я хочу, чтобы толчок также включал это.Для объяснения, если пользователь поставил галочку «Сиденье для инвалидной коляски» и «Средний неф», следует выдвинуть толчок («MN, инвалидная коляска» + e.posX, e.posY).Есть ли способ сделать это без ручного включения большого количества if для каждого возможного результата (возможно, я даже захочу добавить третий набор радиобоксов)?

Спасибо!

Ответы [ 4 ]

13 голосов
/ 13 июля 2010

Я бы собрал строку, которая описывает стул со сравнительно небольшим количеством if утверждений, а затем вызвал бы push в конце.

Так что-то вроде: 

var desc = "";
if(document.getElementById('wheelchairseat').checked) {
  //Wheelchair seat is checked
  desc = "Wheelchair "+desc;
}

if(document.getElementById("backnave").checked) {
  desc = "BN, "+desc;
} else if(document.getElementById("middlenave").checked) {
  desc = "MN, "+desc;
} else if(document.getElementById("frontnave").checked) {
  desc = "FN, "+desc;
}

seatsArray.push(desc + e.posX, e.posY);

Это может быть легко расширено для учета дополнительных групп блоков.

3 голосов
/ 13 июля 2010

Вы правы, IceDragon, нет смысла использовать несколько if / else, потому что каждый раз, когда вы добавляете опции, вам придется переписывать свой код.Есть несколько способов избежать этого.Вот только один подход: 

<html><body>
  <form>
    <p>
      <input type="radio" name="seat" onclick="chose(this, 'Standard')" /> Standard seat
      <input type="radio" name="seat" onclick="chose(this, 'Wheelchair')" /> Wheelchair seat
    </p><p>
      <input type="radio" name="area" onclick="chose(this, 'BN')" /> Back Nave
      <input type="radio" name="area" onclick="chose(this, 'FN')" /> Front nave
      <input type="radio" name="area" onclick="chose(this, 'MN')" /> Middle nave
    </p>
  </form>
  <script>
    // make sure to put these in the order you wish them to appear in the output
    var selections = { area: '', seat: '' };
    var seatsArray = [];
    function chose(input, value) {
      selections[input.name] = value;
    }
    // call this function when user clicks the floor plan:
    function image_clicked(e) {
      var desc = [];
      for (var i in selections) if (selections[i] != '') desc.push(selections[i]);
      seatsArray.push(desc.join(', ') + ' ' + e.posX, e.posY);
    }
  </script>
</body></html>

Обратите внимание, что в объекте selections мы отслеживаем выборки, которые пользователь сделал до сих пор.Затем, когда пользователь щелкает изображение (или любой другой, запускающий код, над которым вы работаете), функция просто форматирует уже собранные значения.

Единственный недостаток написанного мной кода состоит в том, что браузеры склонныкэшируйте состояние переключателей, поэтому переключатель уже может быть выбран, но функция selected () не была вызвана.Один быстрый и грязный обходной путь - добавить идентификатор в тег формы и запустить его при загрузке страницы: 

document.getElementById('form').reset();

Где «форма» - это атрибут идентификатора тега формы.

1 голос
/ 13 июля 2010

Вообще говоря, когда у вас много if / else-if, вы можете заменить их на оператор switch / case.

http://www.javascriptkit.com/javatutors/switch.shtml

Теперь это не обязательно подходит для вашей ситуации, поскольку тип сиденья является отдельным условием от его положения (спереди / посередине / сзади).

Возможно, есть более элегантный подход, чем ваш код, но я не совсем понимаю контекст. Что вы делаете с этим массивом?

0 голосов
/ 13 июля 2010

Сделайте value тем, что хотите отображать в строке результата.Если вы хотите, чтобы 'MN' делал value 'MN'.

Тогда вместо написания оператора if для каждого возможного состояния вы можете перебрать объекты input, чтобы найти тот, который проверен.

Получить все входы от каждого для примерно так ... 

var chairFormElems = document.getElementById('chairFormId').elements;
var naveFormElems = document.getElementById('naveFormId').elements;

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

...