Question

所以推送到这个数组的依赖于几个无线电盒。我有标准和轮椅座位的这个：

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，Wheelchair”+ e.posX，e.posY）。有没有办法让这种情况发生，如果没有手动包括很多其他可能的结果（我甚至可能想添加第三组无线电盒）？

谢谢！

Answer 1

我会用相对较少的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);

这可以很容易地扩展到另外一组块。

Answer 2

你是对的，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（）函数。一个快速而又脏的解决方法是向表单标记添加ID并在页面加载时运行它：

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

其中'form'是表单标记的ID属性。

Answer 3

一般来说，如果你有很多if / else-if，你可以考虑用switch / case语句替换它们。

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

现在，这不一定适合您的情况，因为座位类型与其位置（前/中/后）是一个单独的条件。

可能有比您的代码更优雅的方法，但我并不完全理解上下文。你在用这个数组做什么？

Answer 4

将value设置为您希望在结果字符串中显示的内容。如果你想让'MN'成为value'MN'。

然后，不是为每个可能的状态编写if语句，而是循环遍历input个对象以找到被检查的对象。

从中获取所有输入，如此......

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

然后遍历每个并找到已检查的那个。然后，只需连接value属性即可生成结果字符串。

javascript中的多个IF和ELSE IF

4 个答案: