Javascript 我如何检查页面上的所有vimeo视频是否在点击按钮时播放？

（使用）

我在一个页面上有4个Vimeo嵌入式视频，还有一个按钮（下一步）可以移动到下一页。我想让用户移动到下一页后，他们才看到所有4个视频

我从收集所有视频开始：

var-iframes=$（'iframe.video'）

然后我循环使用vimeo api并检查它们是否被播放：

var videos = [];
var videos_flags = [];
for( var i = 0 ; i < iframes.length ; i++ ) {
    videos[i] = new Vimeo.Player( iframes[i] );
    videos[i].on('play', function( data ) {
        videos_flags[i] = true;
    } );
}

我做错了什么

谢谢
 关于闭包，您需要将变量绑定到元素

function bindValue (n, videos) {
    return function() {
        console.log(n)
        videos_flags[n] = true;
    }
}

for( var i = 0 ; i < iframes.length ; i++ ) {
    videos[i] = new Vimeo.Player( iframes[i], options );
    videos[i].on('play',  bindValue(i, videos_flags));
}

函数bindValue（n，视频）{
返回函数（）{
console.log（n）
视频\u标志[n]=真；
}
}
对于（var i=0；i

一个有效的例子。（创建视频播放器时添加的选项只是为了避免播放器所需的额外属性数据vimeo id或数据vimeo url，您不需要这些）

更好的解决方案是（i变量是您需要更改的全部）：

for（设i=0；i

例如

更好地解释原因。
我知道我遗漏了某些部分，但无法找出原因：-）我不理解您使用
let
解决方案的第二部分。让他创建自己的范围。所以这只是一个范围问题？另外，请注意，您在解决方案中添加了选项，但您没有对其进行定义，因此，如果将来有人需要此解决方案，它将不会运行。非常感谢您的详细回答和参考！！！
function bindValue (n, videos) {
    return function() {
        console.log(n)
        videos_flags[n] = true;
    }
}

for( var i = 0 ; i < iframes.length ; i++ ) {
    videos[i] = new Vimeo.Player( iframes[i], options );
    videos[i].on('play',  bindValue(i, videos_flags));
}

for( let i = 0 ; i < iframes.length ; i++ ) {
    videos[i] = new Vimeo.Player( iframes[i], options );
    videos[i].on('play', function( data ) {
        alert(i)
        videos_flags[i] = true;
    } );
}