时间戳

首页 > 解决方案 > 如何使用 for 循环为音频文件创建动态 URL？Javascript

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

问题描述

我最近开始学习编码，但我遇到了这种自我挑战的问题。我的意图是使用 for 循环在包含颜色名称（代表按钮）的数组中循环，以创建音频文件的动态 URL，而不是单独将音频文件的 URL 添加到每个按钮。作为一个新手，这段代码对我来说很有意义，但它不起作用。使用浏览器“检查”工具，我注意到 for 的输出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);
    });
}

标签： javascriptjquery

解决方案

由于 click 函数是一个回调函数，因此变量 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

}

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

这篇文章似乎很好地解释了这个问题：https ://www.pluralsight.com/guides/javascript-callbacks-variable-scope-problem

推荐阅读