使用JavaScript定位相同类/ ID的多个实例

Question

我目前正在尝试定位同一个div类（ .overlay ）的多个实例-我要执行的基本思想是，每个div都在另一个包装的div中包含一个HTML5视频，在mouseenter显示自身，设置视频时间轴设置为0并播放，并在mouseout将视频重新设置为0。

我遇到的问题是，目前只有网格的第一项起作用，而其他项的翻转没有任何反应。 这是我的Javascript：

$(document).ready(function() {
            $('.overlay').mouseenter(function(){
            $('#testvideo').get(0).play();
            }).mouseout(function() {
            $('#testvideo').get(0).pause();
            $('#testvideo').get(0).currentTime = 0;
            })
        });

我也尝试了以下

$(document).ready(function() {
            $('.overlay').mouseenter.each(function(){
            $('#testvideo').get(0).play();
            }).mouseout(function() {
            $('#testvideo').get(0).pause();
            $('#testvideo').get(0).currentTime = 0;
            })
        });

但这完全破坏了功能！

这是显示应该发生什么的小提琴： http : //jsfiddle.net/jameshenry/ejmfydfy/

该站点与实际站点之间的唯一区别是存在多个网格项和缩略图。 我也不希望这种行为是异步的，而是个人的-任何人都不知道我要去哪里哪里（我猜我的JavaScript！）

Answer 1

问题是您总是使用$('#testvideo') ，与您输入鼠标的div无关。 由于HTML的id属性必须是唯一的，因此只有您设置id testvideo的第一个元素可以按您期望的方式工作。

您应该使用div.overlay引用的video标签，或者可以将CSS类添加到video标签中，以便可以使用该类来查找视频。

下面的代码将获取叠加的视频，而与它无关。

$(document).ready(function() {
  $('.overlay').hover(function() {
    $(this).parent().find('video').get(0).play();
  }, function() {
    var video = $(this).parent().find('video').get(0);
    video.pause();
    video.currentTime = 0;
  });
});

看一下您更新的小提琴 。

Answer 2

第一种方法应该可以，第二种则不能。 但是，如果有很多视频（每个.overley元素一个），则不应使用#testvideo这样的ID。 具有相同id的多个实例会产生意外的行为，例如“仅在第一个项目上工作” 。

你应该改变你的#testvideo与.testvideo和更改您的代码是这样的：

$(document).ready(function() {
    $('.overlay').mouseenter(function(){
        $(this).find('.testvideo').play();
    }).mouseout(function() {
        $(this).find('.testvideo').pause();
        $(this).find('.testvideo').currentTime = 0;
    })
});