Javascript 开关切换到ON和OFF时，需要滚筒机工作

开关打开时机器工作，但当我关闭开关时，当我点击按钮或按下键盘时，机器应该停止工作。我曾尝试使用if..else语句，但似乎一旦单击开关，我的代码就会根据单击按钮的事件来执行，并在单击按钮后完全忽略if..else语句

代码如下：

    $("#switch").on("click", () => {
  $("#switch").toggleClass("ON");
  // console.log(document.getElementById("switch").classList);

  if (document.getElementById("switch").classList[0] === "ON") {
    const drumPads = document.querySelectorAll(".drum-pad");
    $(drumPads).on("click", (evt) => {
      // console.log(evt.target.firstElementChild.id);
      // console.log(evt.target.firstElementChild);

      switch (evt.target.firstElementChild.id) {
        case "Q":
          document.getElementById("Q").play();
          document.getElementById("music-style").innerHTML = "Clap 10";
          break;

        case "W":
          document.getElementById("W").play();
          break;

        case "E":
          document.getElementById("E").play();
          break;

        case "A":
          document.getElementById("A").play();
          break;

        case "S":
          document.getElementById("S").play();
          break;

        case "D":
          document.getElementById("D").play();
          break;

        case "Z":
          document.getElementById("Z").play();
          break;

        case "X":
          document.getElementById("X").play();
          break;

        case "C":
          document.getElementById("C").play();
          break;

        default:
          console.log("error!");
      }
    });
  } else {
    return null;
  }
});

---

您应该检查元素

#switch

在事件处理程序中是否具有打开的类

，以便单击，或者在关闭开关时取消订阅事件侦听器

此外，只有在
类列表
中将类
放在第一位时，您在
上检查类
是否存在的方法才会起作用，这可能会导致将来出现错误

您还混合了jQuery和vanilla js

试试这个：

功能手柄点击（evt）{
//log（evt.target.firstElementChild.id）；
//log（evt.target.firstElementChild）；
开关（evt.target.firstElementChild.id）{
案例“Q”：
document.getElementById（“Q”）.play（）；
document.getElementById（“音乐风格”）.innerHTML=“Clap 10”；
打破
案例“W”：
document.getElementById（“W”）.play（）；
打破
案例“E”：
document.getElementById（“E”）.play（）；
打破
案例“A”：
document.getElementById（“A”）.play（）；
打破
案例“S”：
document.getElementById（“S”）.play（）；
打破
案例“D”：
document.getElementById（“D”）.play（）；
打破
案例“Z”：
document.getElementById（“Z”）.play（）；
打破
案例“X”：
document.getElementById（“X”）.play（）；
打破
案例“C”：
document.getElementById（“C”）.play（）；
打破
违约：
log（“错误！”）；
}
}
常数swtch=$（“#开关”）；
swtch.on（“单击”，（）=>{
开关类（“开启”）；
//log（document.getElementById（“开关”）.classList）；
常量鼓点=$（“.drumpad”）；
如果（开关为（“.ON”））{
drumPads.on（“单击”，handleClick）；
}否则{
drumPads.off（“单击”，handleClick）；
}
});

您还可以直接使用从click target捕获的元素来播放switch语句，而不是使用
文档重新搜索它，从而进一步优化switch语句。getElementById
：

功能手柄点击（evt）{
//log（evt.target.firstElementChild.id）；
//log（evt.target.firstElementChild）；
常量player=evt.target.firstElementChild；
如果（！玩家）{
log（“没有玩家元素！”，evt.target）；
返回；
}
开关（player.id）{
案例“Q”：
player.play（）；
document.getElementById（“音乐风格”）.innerHTML=“Clap 10”；
打破
案例“W”：
案例“E”：
案例“A”：
案例“S”：
案例“D”：
案例“Z”：
案例“X”：
案例“C”：
player.play（）；
打破
违约：
log（“错误！”）；
}
}
常数swtch=$（“#开关”）；
swtch.on（“单击”，（）=>{
开关类（“开启”）；
//log（document.getElementById（“开关”）.classList）；
常量鼓点=$（“.drumpad”）；
如果（开关为（“.ON”））{
drumPads.on（“单击”，handleClick）；
}否则{
drumPads.off（“单击”，handleClick）；
}
});
您的方法有条件地分配click侦听器，而不是检查侦听器函数内的条件。还要注意的是，您的开关块根本不是必需的；您只需执行
evt.target.firstElementChild.play（）这里有一种方法：@ChrisG感谢您提供了指向备用解决方案的链接。添加和删除单击处理程序在我看来并不理想。最好先分配它们，然后处理其中的不同应用程序状态。julien.gib感谢您的时间，但我复制粘贴了您的解决方案（两者都有）当开关关闭时，它们似乎不会阻止我的机器工作。如果您对@user14467240感兴趣，这里有一个指向我的沙盒的链接，您是对的。当你不仔细地测试你的代码时，就会发生这种情况！
handleClick
函数在
#switch
上的
click
处理程序中的作用域错误。无法将其作为处理程序删除，因为每次单击切换时都会重新定义它。我已经解决了这个问题，并在您的沙箱上成功地进行了测试。对不起！另外，以我的名义命名变量“switch”并不是最聪明的做法。…。@julien.giban而且很有效！再次感谢您不仅提供了解决方案，而且还提供了改进版。另外，直到现在我还不知道jQuery中的.is方法。