嵌套函数中的变量返回未定义

Question

变量my_sound在第一个外部函数中声明。 因此，我应该能够在嵌套函数中使用它。 但是，mouseout事件不会产生任何结果。 我究竟做错了什么？ 谢谢你的帮助。

$(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]).appendTo("#main").addClass("pics");
    }

    $("#main").on("click", ".pics", function () {
        var i = $(this).index();
        var my_sound =($("<audio/>").attr("src", "audio/" + starting_sounds[i])).load().get(0).play();

        $("#main").on("mouseout", ".pics", function () {
            $("my_sound").animate({ volume: 0 }, 1000);
        });
    });
});

Answer 1

问题可能是.play()不会返回jQuery对象（或其他任何东西，因此undefined ）。

此外，正如其他评论所言，无论$('my_sound').whatever my_sound.whatever而是jQuery对象 ，您都不希望$('my_sound').whatever my_sound.whatever 。 所以也许你可以尝试

var $my_sound = $("<audio />").attr("suchandsuch","etc");
$my_sound.load().get(0).play();
$my_sound.whatever();