改进 HTML5 视频和 jQuery 代码以提高效率

Question

我的网页上有 5 个视频。只有当您将鼠标悬停在视频上时，它才会开始播放。我的代码如下：

$(".service:nth-child(1) a").hover(function(){
    $('.service:nth-child(1) a video#bgvid').get(0).play();
},function(){
    $('.service:nth-child(1) a video#bgvid').get(0).pause();
});

我使用了 :nth-child，因为如果我将鼠标悬停在视频 4 上，它会播放视频 1，所以我必须具体说明。这意味着我必须为每个视频重复上述代码，但相应地更改 :nth-child 数字。我对 JS 不是特别熟练，但必须有更好、更有效的方法吗？

Answer 1

未经测试，但 this 应该可以帮助您入门。哈，双关语。 this。明白了吗？

$('.service a').hover(function(){
  $(this).children('video').get(0).play();
}, function(){
  $(this).children('video').get(0).pause();
});

另请参阅：

Answer 2

正如布拉德所说，使用 this 将允许您获取当前悬停的元素。但是，afaik jQuery 不允许您通过他们的对象访问 HTML5 视频 API，因此您需要执行以下操作：

$('.service a video').hover(function(e){
  e.target.play();
}, function(e){
  e.target.pause();
});

当您将函数绑定到事件时，this 将始终是触发事件的对象。调用 $(this) returns 一个 jQuery 的对象

改进 HTML5 视频和 jQuery 代码以提高效率

Improving HTML5 video and jQuery code to be more efficient

javascript

css

video

jquery