JS新手求教：如何用单个函数控制6个独立切换按钮？

嘿，你已经搞定单个按钮的切换功能啦，这很棒！要让同一个函数搞定6个独立按钮其实一点都不难——你现在的问题是代码里硬编码了按钮的ID（比如document.getElementById("1")），所以只能作用于那一个按钮。我们只需要利用你已经传入的button参数，直接操作当前点击的按钮本身就行。

最简单的修改方案 #

直接修改你的toggle函数，去掉硬编码的ID，改用传入的button参数：

function toggle(button) {
  // 直接操作点击的那个按钮，不用再通过ID查找
  if (button.value === "OFF") {
    button.value = "ON";
  } else {
    button.value = "OFF";
  }
}

然后你的每个按钮只需要在点击时把自身传进去就行，比如：

<button id="btn1" value="OFF" onclick="toggle(this)">按钮1</button>
<button id="btn2" value="OFF" onclick="toggle(this)">按钮2</button>
<button id="btn3" value="OFF" onclick="toggle(this)">按钮3</button>
<!-- 剩下的3个按钮照着上面的格式写就行，ID可以随便设，不影响功能 -->

可以再简化一点的写法 #

用三元运算符把函数缩成一行，逻辑是完全一致的：

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

更现代的无内联事件写法（可选） #

如果不想在HTML里写onclick属性，也可以用事件监听的方式，这样HTML和JS分离更清晰：

首先给所有切换按钮加个统一的类名，比如toggle-btn：

<button class="toggle-btn" value="OFF">按钮1</button>
<button class="toggle-btn" value="OFF">按钮2</button>
<!-- 其他按钮都加这个类 -->

然后写JS代码绑定事件：

// 等页面DOM加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 找到所有带toggle-btn类的按钮
  const allToggleButtons = document.querySelectorAll('.toggle-btn');
  
  // 给每个按钮绑定点击事件
  allToggleButtons.forEach(button => {
    button.addEventListener('click', function() {
      // 切换按钮的value值
      this.value = this.value === "OFF" ? "ON" : "OFF";
    });
  });
});

这样不管你有6个还是更多按钮，只要加了toggle-btn类，都会自动拥有切换功能，不用一个个写onclick啦！

内容的提问来源于stack exchange，提问作者Lewis Clarke