Question

我有一个图像.png文件数组和一个匹配的.mp3s数组。单击图像应该通过将索引从一个数组传递到另一个数组来播放音频，但是我得到最后一行的“未定义”错误。

$(document).ready(function () {
    var starting_pics = ["CN.gif", "EN.gif", "GN.gif"];
    var starting_sounds = ["CN.mp3", "EN.mp3", "GN.mp3"];

    var i = 0;

    for (i = 0; i < starting_pics.length; i++) {
        $("<img/>").attr("src", "images/" + starting_pics[i]).load(function () {
            $(this).appendTo("#main");
            $(this).addClass("pics");
        });
    }

    for (i = 0; i < starting_sounds.length; i++) {
        $("<audio/>").attr("src", "audio/" + starting_sounds[i]).load(function () {
            $(this).appendTo("#main");
            $(this).addClass("sound");
        });
    }

    $("#main").on("click", ".pics", function () {
        var i = $(this).index();
        alert(i);
        $(".sound").get(i).play();
    });
});

Answer 1

使用.load()未正确附加元素，请执行以下修改。

for (i = 0; i < starting_pics.length; i++) {
  $("<img/>").attr("src", "" + starting_pics[i])
             .appendTo("#main")
             .addClass("pics");
}

for (i = 0; i < starting_sounds.length; i++) {
  $("<audio/>").attr("src", "" + starting_sounds[i])
               .appendTo("#main")
               .addClass("sound");
}

<强>更新

自jQuery 1.8以来不推荐使用.load()版本 - 使用$("selector").on("load, func...。并确保在设置load属性之前绑定src事件 - 某些浏览器会在设置`src时立即触发load事件，如果它已被缓存。

此外，<audio>元素似乎没有load个事件。这就是为什么没有找到元素 - load事件从未执行过，所以它们没有附加。您要查看的事件包括canplay或canplaythrough，或此列表中的内容：https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Media_events

数组中音频的未定义错误

1 个答案: