javascript - 点击事件: switch statement not working

Question

我试图根据单击的变量触发多个单击事件，但是 switch 语句不起作用。我认为这是 Switch 参数中的“var”，但我不知道如何纠正它:

var buttonQ = document.getElementById('Heater1button');
var buttonW = document.getElementById('Heater2button');
var buttonE = document.getElementById('Heater3button');
var buttonA = document.getElementById('Heater4button');
var buttonS = document.getElementById('Heater6button');
var buttonD = document.getElementById('OpenHHbutton');
var buttonZ = document.getElementById('KicknHat');
var buttonX = document.getElementById("Kickbutton");
var buttonC = document.getElementById('CClosedHHbutton');

$(document).click(function() {
  switch (var) {
    case buttonQ:
      document.getElementById('Q').play(), $("#displaytext").text("Heater 1")
      break;
    case buttonW:
      document.getElementById('W').play(), $("#displaytext").text("Heater 2")
      break;
    case buttonE:
      document.getElementById('E').play(), $("#displaytext").text("Heater 3")
      break;
    case buttonA:
      document.getElementById('A').play(), $("#displaytext").text("Heater 4")
      break;
    case buttonS:
      document.getElementById('S').play(), $("#displaytext").text("Heater 6")
      break;
    case buttonD:
      document.getElementById('D').play(), $("#displaytext").text("Open HH")
      break;

    case buttonZ:
      document.getElementById('Z').play(), $("#displaytext").text("KicknHat")
      break;
    case buttonX:
      document.getElementById('X').play(), $("#displaytext").text("Kick")
      break;
    case buttonC:
      document.getElementById('C').play(), $("#displaytext").text("Closed HH")
      break;
  }
})

Answer 1

您不应使用 switch 语句，而应使用附加到每个元素的事件监听器。

buttonQ.addEventListener("click", function() {
    document.getElementById('Q').play(), $("#displaytext").text("Heater 1");
});
buttonW.addEventListener("click", function() {
    document.getElementById('W').play(), $("#displaytext").text("Heater 2");
});

所有按钮依此类推。