JavaScript 中的多个 IF 和 ELSE IF

发布于 2024-09-08 20:34:33 字数 1025 浏览 1 评论 0原文

因此，推送到该数组的内容取决于几个单选框。我已经为标准座位和轮椅座位准备了这个：

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）。有没有什么方法可以实现这种情况，而无需为每个可能的结果手动包含大量 else if（我什至可能想添加第三组单选框）？

谢谢！

原文

So what's getting pushed to this array is dependant on a few radio boxes. I've got this for standard and wheelchair seats:

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

And this is the equivalent form code:

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

But I want to add in some more radio boxes, which are separate from the standard/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

And I want the push to also include this. To explain, if the user ticked "Wheelchair seat" and "Middle nave", the push should output ("MN, Wheelchair " + e.posX, e.posY). Is there any way of making this happen without manually including a lot of else if's for each possible outcome (I may even want to add a third set of radio boxes)?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安静被遗忘 2024-09-15 20:34:33

我将使用相对少量的 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);

这可以很容易地扩展以考虑额外的块组。

I would build up the string that describes the chair with a comparatively small number of if statements, and then call the push at the end.

So something like:

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

This can easily be extended to account for additional groups of blocks.

回复收藏 0 原文

無心 2024-09-15 20:34:33

你是对的，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 对象中，我们跟踪用户迄今为止所做的选择。然后，当用户单击图像（或触发您正在处理的代码的任何内容）时，该函数只会格式化已收集的值。

我编写此代码的方式的一个缺点是浏览器倾向于缓存单选按钮的状态，因此单选按钮可能已被选中，但未调用 Choose() 函数。一种快速但肮脏的解决方法是将 ID 添加到表单标记并在页面加载时运行：

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

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

You are right, IceDragon, it doesn't make sense to use multiple if/else's, because every single time you add options, you'll have to rewrite your code. There are a number of ways to avoid this. Here is just one approach:

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

Notice that in the selections object, we're keeping track of the selections that the user has made so far. Then when the user clicks the image (or whatever triggers the code you are working on), the function simply formats the values already collected.

The one drawback to the way I have written this code is that browsers tend to cache the state of the radio buttons, so a radio button may be already selected, but the chose() function wasn't called. One quick and dirty workaround is to add an ID to the form tag and run this on page load:

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

Where 'form' is the ID attribute of the form tag.

回复收藏 0 原文

羞稚 2024-09-15 20:34:33

一般来说，当你有很多 if/else-if 时，你会考虑用 switch/case 语句替换它们。

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

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

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

回复收藏 0 原文

娜些时光，永不杰束 2024-09-15 20:34:33

将 value 设置为您希望在结果字符串中显示的内容。如果您想要“MN”，请将值设置为“MN”。

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

像这样获取每个 for 的所有输入...

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

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

Make the value what you want to appear in the result string. If you want 'MN' make the value 'MN'.

Then instead of writing an if statement for each possible state you could loop through the input objects to find the one that is checked.

Get all the inputs from each for like so...

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

Then loop through each and find the one that's checked. Then just concat the value attributes to make your result string.

回复收藏 0 原文

~没有更多了~

关于作者

赠佳期

暂无简介

0 文章

0 评论

21 人气

关注发私信

友情链接

文江博客

JavaScript 中的多个 IF 和 ELSE IF

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

JavaScript 中的多个 IF 和 ELSE IF

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。