如何使用 for 循环为音频文件创建动态 URL？Javascript

Question

我最近开始学习编码，但我对这种自我挑战感到困惑。我的目的是使用 for 循环循环遍历包含代表按钮的颜色名称的数组，以创建指向音频文件的动态 URL，而不是将音频文件的 URL 单独添加到每个按钮。作为新手，这段代码对我来说很有意义，但它不起作用。使用浏览器“检查”工具，我注意到输出buttonColours[i]为undefined。请帮助我了解原因！

var buttonColours = ["red","blue","green","yellow"];

var sounds = [];

for (var i = 0; i < buttonColours.length; i++){

    $("."+buttonColours[i]+"").click(function(event){

        // Add sound when button is clicked

        sounds[i]= new Audio("sounds/"+buttonColours[i]+".mp3");

        sounds[i].play();

        // Add CSS class when button is clicked

        $(".red").addClass("pressed");

        setTimeout(function(){

            $(".red").removeClass("pressed");

        }, 200);

    });

}

Answer 1

解决此问题的另一种方法是使用letinstead of var. let在循环范围内创建一个变量，其中var将是一个全局变量，它将在每次迭代时被覆盖。这意味着let您不会覆盖该值，而是在每次迭代时创建一个新值，因此引用保持不变。var buttonColours = ["red","blue","green","yellow"];var sounds = [];// Notice let i instead of var i.for (let i = 0; i < buttonColours.length; i++) {  $("." + buttonColours[i]).click(function(event) {    // Add sound when button is clicked    sounds[i] = new Audio("sounds/" + buttonColours[i] + ".mp3");    sounds[i].play();    // Add CSS class when button is clicked    $(".red").addClass("pressed");    setTimeout(function() {      $(".red").removeClass("pressed");    }, 200);  });}

Answer 2

由于点击函数是一个回调，变量 i 可能在回调发生之前已经改变。所以你必须将 i 的值绑定到函数。试试这个：var buttonColours = ["red", "blue", "green", "yellow"];var sounds = [];for (var i = 0; i < buttonColours.length; i++) {  $("." + buttonColours[i] + "").click(function(i, event) { // OBSERVE i have added i as a parameter    // Add sound when button is clicked    sounds[i] = new Audio("sounds/" + buttonColours[i] + ".mp3");    sounds[i].play();    // Add CSS class when button is clicked    $(".red").addClass("pressed");    setTimeout(function() {      $(".red").removeClass("pressed");    }, 200);  }.bind(this, i)); // OBSERVE I have added an i here}您在代码中遇到的另一个问题是您尚未初始化声音数组。我不认为它会出错，所以我没有更正它。