Question

http://codepen.io/hennysmafter/pen/aNrVKG?editors=1010

有问题的代码是：

(function($) {
  $(document).ready(function(){
    $('video').each(function() {
        $(this).get(0).pause();
    });
  });   

  $(document).on('click','span',function(){
    if ( $('li').hasClass('current') ) {
      $('li.current').find('video').each(function() {
          $(this).get(0).play();
      }); 
    } else if ( !$('li').hasClass('current') ) {
      $('li').find('video').each(function() {
          $(this).get(0).pause();
      });       
    }
  });

})(jQuery);

问题。

当用户点击第3个导航按钮时，li元素尚未为其分配自定义类。所以它现在要求用户在同一个导航按钮上手动点击第二次（这显然是愚蠢的。）。

要求

带有视频元素的li可以是任何幻灯片，因此我无法对其进行硬编码。

我尝试了什么。

我已经尝试了Ayyoub Dahhane的建议，它的工作非常出色，但目前它是硬编码的，哪些幻灯片是视频幻灯片，但这不可能。我尝试了一些其他代码，可以在以下位置看到： http://codepen.io/hennysmafter/pen/PNvEPN＆amp; http://codepen.io/hennysmafter/pen/MydEBw 我试着延迟工作。 Codepen已经更改，所以没有链接。但它无论如何都没有用。

我发现这绝对令人震惊，这被证明是如此艰难。所以这里我的最新尝试正在运行，但在控制台中显示了一些错误，仍然需要双击：http://codepen.io/hennysmafter/pen/aNrVKG?editors=1010

回到绘图板。

Answer 1

有人问我，这是onclick function requires double click because of class assignment delay的答案：

我找到了造成这个问题的原因：

单击某个范围时，您正在播放其父级具有“.current”类的元素。

但是当你单击一个元素时，它和“.show”类，以及之前选择的span获得“.hide”类并保持“.current”类，直到动画结束（然后是“。显示“＆amp;”.hide“类被删除，”。current“类开关元素。）

一种解决方案是更改选择器，如下所示：

$(document).on('click','span',function(){
      console.log('the if is running');
      $('.current, .hide').find('video').each(function() {
          $(this).get(0).pause();
      });  
      $('.show').find('video').each(function() {
          $(this).get(0).play();
      });

});

通过执行此操作，无论何时单击某个范围，您都会暂停其父级具有“.hide”类的元素，并播放其父级具有“.show”类的元素。

另一种解决方案应该是在应用类时创建一个事件（参见jQuery - Fire event if CSS class changed）。

Answer 2

     $(function(){
  $("nav").on('click','span:nth-child(3)',function(){
    $('video').each(function() {
      $(this).get(0).play();
          });   
});

 $("nav").on('click','span:not(:nth-child(3))',function(){
    $('video').each(function() {
      $(this).get(0).pause();
          });   
});
})

链接到测试 Here

如果li具有类当前，则tiltSlider播放/暂停视频元素

2 个答案: