Question

我正在尝试定位同一div类（.overlay）的多个实例 - 我试图执行的基本思想是每个div在另一个内部包含HTML5视频在mouseenter显示自己的包装div，将视频时间轴设置为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的第一个元素才会按预期方式工作。

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

以下代码将获取重叠的视频，与之无关。

$(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;
  });
});

看看at your updated fiddle。

Answer 2

你做的第一种方式应该有效，第二种不应该。但是，如果有很多视频（每个#testvideo元素一个），则不应使用.overley之类的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;
    })
});

使用Javascript定位同一类/ ID的多个实例

2 个答案: