Javascript 悬停视频播放仅播放DOM中的最后一个视频

我正在创建一个组件，其中每个部分都有一个小视频。您将鼠标悬停在视频上，它就会播放，但实际上只有HTML中的最后一个视频才会播放

以下是打字脚本：

document.addEventListener("DOMContentLoaded", videoPlays, false);

function videoPlays() {
    var video: HTMLCollectionOf<Element> = document.getElementsByClassName("video");

    for(var i = 0; i < video.length ; i++) {
        var vid: HTMLVideoElement = video[i] as HTMLVideoElement;

        vid.addEventListener("mouseover", (e :MouseEvent) => {
            vid.play();
        });

       vid.addEventListener("mouseout", (e :MouseEvent) => {
            vid.pause();
        });
    }
}

document.addEventListener（“DOMContentLoaded”，videoPlays，false）；
函数videoPlays（）{
var video:HTMLCollectionOf=document.getElementsByClassName（“视频”）；
对于（变量i=0；i{
视频播放（）；
});
参见addEventListener（“mouseout”，（e:MouseEvent）=>{
参阅暂停（）；
});
}
}

html基本上是：

<video src="./images/rieky.mp4" class="video" loop></video>
<video src="./images/rieky.mp4" class="video" loop></video>
<video src="./images/rieky.mp4" class="video" loop></video>
<video src="./images/rieky.mp4" class="video" loop></video>
<video src="./images/rieky.mp4" class="video" loop></video>

强烈假设所有项在声明方面都是相同的，但我认为DOM的区别不仅仅在于它们的类名或其他属性

这是一个正在实施的问题的gif。请注意，右侧flexbox是唯一的视频播放设备：

---

这不是一个问题，而是使用

var

语句声明的变量行为，即监听器将附加到每个视频，但他们将仅为最后一个视频调用

播放

/

暂停

，因为

var

是函数范围，并且它只保存循环中最后一项的引用。 您可以通过使用

let

语句将循环中的变量声明为块作用域来解决此问题，如下所示：

function videoPlays() {
    var video: HTMLCollectionOf<Element> = document.getElementsByClassName("video");

    for(let i = 0; i < video.length ; i++) {
        let vid: HTMLVideoElement = video[i] as HTMLVideoElement;

        vid.addEventListener("mouseover", (e :MouseEvent) => {
            vid.play();
        });

       vid.addEventListener("mouseout", (e :MouseEvent) => {
            vid.pause();
        });
    }
}

功能视频播放（）{
var video:HTMLCollectionOf=document.getElementsByClassName（“视频”）；
for（设i=0；i{
视频播放（）；
});
参见addEventListener（“mouseout”，（e:MouseEvent）=>{
参阅暂停（）；
});
}
}

这不是问题，而是使用

var

语句声明的变量行为，即监听器将附加到每个视频，但他们将仅为最后一个视频调用

play

/

pause

，因为

var

是函数范围，并且它只保存循环中最后一项的引用。 您可以通过使用

let

语句将循环中的变量声明为块作用域来解决此问题，如下所示：

function videoPlays() {
    var video: HTMLCollectionOf<Element> = document.getElementsByClassName("video");

    for(let i = 0; i < video.length ; i++) {
        let vid: HTMLVideoElement = video[i] as HTMLVideoElement;

        vid.addEventListener("mouseover", (e :MouseEvent) => {
            vid.play();
        });

       vid.addEventListener("mouseout", (e :MouseEvent) => {
            vid.pause();
        });
    }
}

功能视频播放（）{
var video:HTMLCollectionOf=document.getElementsByClassName（“视频”）；
for（设i=0；i{
视频播放（）；
});
参见addEventListener（“mouseout”，（e:MouseEvent）=>{
参阅暂停（）；
});
}
}

啊，好的，我明白了。非常感谢：）啊，好的，我明白了。非常感谢：）