2

我有一组图像 .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();
    });
});
4

1 回答 1

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

于 2013-08-02T23:46:29.123 回答