事件触发后获取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