Question

我有许多元素div.teaser，每个元素都包含一个用mediaelementplayer包装的视频。在mouseenter和mouseleave上，我希望视频分别播放media.play并停止media.stop。

HTML看起来像这样：

<div class="teaser">
    <a href="#">
       <video>...</video>
    </a>
</div>
<div class="teaser">
    <a href="#">
       <video>...</video>
    </a>
</div>
[... and so on]

问题是，如果我悬停任何元素，它们都会触发事件。目前的jquery是：

$('video').mediaelementplayer({
    features: [],
    loop: false,
    enableAutosize: true,
    alwaysShowControls: false,
    iPadUseNativeControls: false,
    iPhoneUseNativeControls: false, 
    AndroidUseNativeControls: false,
    alwaysShowHours: false,
    showTimecodeFrameCount: false,
    pauseOtherPlayers: true,

    success: function(media, domElement, player) {      
        $(".teaser").on({
            mouseenter: function() {
                media.play();
            },
            mouseleave: function() {
                media.stop();
            }

        });

    } // Success     
}); // mediaelementplayer

我猜需要告诉函数绑定到$(this) div.teaser。我尝试了很多选择，但似乎都没有。

JSFiddle

Answer 1

类似的东西：

$(".teaser").mouseenter(function(){
$(this).find('video').media.play();
});

你可以显示更容易的HTML ...

编辑：你去吧

$(".teaser").mouseenter(function(){
$(this).find('video').get(0).play();
});

Answer 2

假设你有这个div＃video，其中包含所有这些div.teaser。您可以附加这样的事件监听器

$('#video').on('mouseenter', 'div.teaser', function() {
  //do media play
});

$('#video').on('mouseleave', 'div.teaser', function() {
  //do media stop
});

要获取div.teaser对象，请在函数

中使用$（this）

将mouseenter和mouseleave事件绑定到具有相同类的多个元素

2 个答案: