javascript - 改进 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 应该可以帮助您入门。哈，双关语。 这个。明白了吗？

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

另请参阅:https://stackoverflow.com/a/28443915/362536