Question

我正在处理用户将鼠标悬停在视频上以触发其播放的内容。当它们悬停在不同的视频上时，这个新视频开始播放并停止其他视频。

我正在使用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);

干杯：]

Answer 1

我对它进行了一些改进 - 根据@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);

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

1 个答案: