javascript - 事件触发后获取 jquery 元素的索引

Question

我正在通过 jquery 从指向 mp4 文件的 url 数组创建视频对象。我想让第一个视频自动播放，然后一旦完成就选择“结束”功能并播放序列中的下一个视频。

 $(document).ready(function () {

            var urls = ["https://s3-us-west-1.amazonaws.com/linkto.mp4", "https://s3-us-west-1.amazonaws.com/linktoother.mp4"]
            var videos = [];

            for (var i = 0; i < urls.length; i++) {

                var path = urls[i];

                var video = $('<video></video>');
                var source = $('<source></source>');

                source.attr('src', path);
                source.appendTo(video);

                if (i === 0) {
                    video.attr('autoplay', 'true');
                }
                video.attr('id', 'video_' + i);
                video.attr('preload', 'true');
                video.attr('width', '100%');

                videos.push(video);

                video.on('ended', function () {
                    console.log('Video has ended!' + i);
//                        playNext(video);
                });

                $('#movie').append(video);

            }

我可以看到生成的电影，并且第一部播放得很好。问题是当“结束”函数变量 i == 2 时，因为这就是数组中有多少个视频，并且 for 循环增加了 i。我已经离开 JavaScript 一段时间了。我可以想到解决方法，例如向视频元素添加索引属性或其他内容，但基本上如何在“结束”函数中获得正确的索引。

Answer 1

这里的问题是在循环中错误地使用了闭包变量。

在您的情况下，您可以通过使用 $.each() 迭代数组来创建本地闭包

$(document).ready(function () {

    var urls = ["https://s3-us-west-1.amazonaws.com/linkto.mp4", "https://s3-us-west-1.amazonaws.com/linktoother.mp4"]
    var videos = [];

    $.each(urls, function (i, path) {
        var video = $('<video></video>');
        var source = $('<source></source>');

        source.attr('src', path);
        source.appendTo(video);

        if (i === 0) {
            video.attr('autoplay', 'true');
        }
        video.attr('id', 'video_' + i);
        video.attr('preload', 'true');
        video.attr('width', '100%');

        videos.push(video);

        video.on('ended', function () {
            console.log(i)
        });

        $('#movie').append(video);
    })

})

<小时/>

您确实不想拥有索引，因为所有视频元素都是同级元素，您只需找到当前结束的视频元素的下一个同级元素即可

    video.on('ended', function () {
        console.log('Video has ended!' + $(this).index());
        var $current = $(this),
            $next = $this.next();
        console.log($next.find('source').attr('src'))
        //playNext($(this));
    });

• Creating closures in loops: A common mistake
• JavaScript closure inside loops – simple practical example