針對同一類/ ID與JavaScript的多個實例

Question

我想在目前的目標多個實例div類（.overlay） - 我試圖執行的基本思想是每個div包含HTML5視頻內的另一個包裹的div上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; 
    }); 
}); 

看一看at your updated fiddle。

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