由单一功能控制的多个切换按钮答案

【问题标题】：Multiple toggle buttons controlled by single function由单一功能控制的多个切换按钮
【发布时间】：2018-09-22 09:54:04
【问题描述】：

仍在学习 JS 的基本原理并尝试创建一个可以打开和关闭按钮的函数，这很好用。使用以下。（请忽略handlebars.js）

我想知道如何创建一个函数来处理 6 个单独的切换。

提前干杯，

新手。

       
        function toggle(button)
  {
  if(document.getElementById("1").value=="OFF"){
   document.getElementById("1").value="ON";}
 
  else if(document.getElementById("1").value=="ON"){
   document.getElementById("1").value="OFF";}
                                                     }

    &lt;input type="button" id="1" {{#if profile.userSettings.notificationSettings.enabled}} value="ON" {{else}} value="OFF" {{/if}} onclick="toggle(this);  "&gt;

【问题讨论】：

@Zenoo 哇，非常感谢。这实际上解释了很多。关于ID中的数字，这是什么原因？只是不好的做法？
您应该查看stackoverflow.com/questions/5672903/… 以获取有关 id 的更多信息。如果你以后想回答某人，你应该在他的回答下发表评论，而不是在你的问题下。如果我不回去看这个问题，我永远不会知道你回答了。另外，如果它解决了您的问题，请不要忘记验证答案。

标签： javascript html button toggle

【解决方案1】：

首先，不要以数字开头的 ID。

对于您的主要问题，您可以简单地使用函数的参数button 并检查其值。

function toggle(button){
  button.value = button.value == 'OFF' ? 'ON' : 'OFF';
}

<input type="button" value="ON" onclick="toggle(this);">
<input type="button" value="OFF" onclick="toggle(this);">
<input type="button" value="ON" onclick="toggle(this);">

PS：

button.value = button.value == 'OFF' ? 'ON' : 'OFF'

三元运算符是否等价于

if(button.value == 'OFF'){
    button.value = 'ON';
}else{
    button.value = 'OFF';
}

【讨论】：