在Javascript中给一批对象添加事件监听器时，能否用for循环代替switch语句来指定不同的场景？[重复]

Question

这个问题在这里已经有了答案:

循环中的JavaScript闭环--简单的实际例子 (44个答案)

封闭 15天前.

所以基本上我是想在点击不同的按钮时播放不同的声音文件。我写了一个switch语句，它的工作。我试着简化代码，写了一个for循环。然而，for循环并不工作。是否因为在for循环的方案中存在i变量？

for循环

var soundFiles = ["crash.mp3", "kick-bass.mp3", "snare.mp3", "tom-1.mp3", "tom-2.mp3", "tom-3.mp3", "tom-4.mp3"]

for (var i = 0; i < document.querySelectorAll(".drum").length; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function() {
    var soundSrc = "sounds/" + soundFiles[i];
    var audio = new Audio(soundSrc);
    audio.play();
  });
}

换句话说

for (var i = 0; i < document.querySelectorAll(".drum").length; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function() {
    switch (this.innerHTML) {
      case "w":
        var crash = new Audio("sounds/crash.mp3");
        crash.play();
        break;
      case "a":
        var kick = new Audio("sounds/kick-bass.mp3");
        kick.play();
        break;
      case "s":
        var snare = new Audio("sounds/snare.mp3");
        snare.play();
        break;
      case "d":
        var tom1 = new Audio("sounds/tom-1.mp3");
        tom1.play();
        break;
      case "j":
        var tom2 = new Audio("sounds/tom-2.mp3");
        tom2.play();
        break;
      case "k":
        var tom3 = new Audio("sounds/tom-3.mp3");
        tom3.play();
        break;
      case "l":
        var tom4 = new Audio("sounds/tom-4.mp3");
        tom4.play();
        break;
      default:
        console.log(this.innerHTML)

    }
    var soundSrc = "sounds/" + soundFiles[i];
    var audio = new Audio(soundSrc);
    audio.play();
  });
}

Answer 1

首先，调用 .querySelectorAll() 曾经:

let drums = document.querySelectorAll(".drum");

然后在你的循环中，使用 let 而不是 var:

for (let i = 0; i < drums.length; i++) {
  drums[i].addEventListener("click", function() {
    var soundSrc = "sounds/" + soundFiles[i];
    var audio = new Audio(soundSrc);
    audio.play();
  });
}

通过使用 let 而不是 var 为循环指数 i，你会得到一个独特的 i 循环的每次迭代。有了 var当点击事件实际发生时，变量的作用域是包围函数，所以当点击事件实际发生时，变量的长度等于数组的长度，所以无法正常工作。

在IE以外的浏览器中，你可以让它变得更加简单。

drums.forEach(function(drum, i) {
  drum.addEventListener("click", function() {
    var soundSrc = "sounds/" + soundFiles[i];
    var audio = new Audio(soundSrc);
    audio.play();
  });
});