数组中音频的未定义错误

Question

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

$(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");
}

更新：

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

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