如何使用 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

}

您在代码中遇到的另一个问题是您尚未初始化声音数组。我不认为它会出错，所以我没有更正它。