jQuery视频悬停优化动态选择器

jQuery video hover optimising dynamic selectors

本文关键字：动态 选择器 优化 悬停 视频 jQuery      更新时间：2023-09-26

我正在研究用户悬停在视频上触发它播放的东西。当他们将鼠标悬停在另一个视频上时，这个新视频开始播放，并停止其他视频。

我正在使用Vimeo和他们的Froogaloop库(这里不太相关，也可以是视频标签，主要关注选择器的缓存)。

这段代码工作得很好，但我知道它没有像它应该的那样优化，它每次调用悬停函数时都使用多个选择器，这是我不想做的。我可以改进这段代码，使它不这样做吗?或者在现代浏览器中继续像这样调用jQuery选择器是可以的吗?

这是一个简化的工作演示

function hoverVid() {
  var frame = $(this).find('iframe');
  var player = $f(frame[0]);
  player.api('play');
  var vids = $('.vid-row iframe').not(frame);
  vids.each(function(index) {
    var frame = $(this);
    var player = $f(frame[0]);
    player.api('pause');
  });
}
$('.vid-row').hover(hoverVid);

欢呼:]

我稍微改进了一下-根据@GerardCuadras的评论，通过暂停所有视频，然后播放所需的视频，删除了使用。not()过滤器的需要。

这允许我缓存iframe列表。我还优化了选择器，使用#id和.find()。

JSBin 

var vidz = $('#vidz').find('iframe');
function hoverVid(e){
  vidz.each(function( index ){
    var frame = $(this);
    var player = $f(frame[0]);
    player.api('pause');
  });
  var frame = $(this).find('iframe');
  var player = $f(frame[0]);
  player.api('play'); 
}
$('.vid-row').hover(hoverVid);
相关文章：