tiltSlider play/pause 个视频元素，如果 li 当前有 class 个

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 元素尚未为其分配自定义 class。所以它现在要求用户在同一个导航按钮上手动单击第二次（这显然是愚蠢的。）。

要求

带有视频元素的 li 可以是任何幻灯片，所以我不能硬编码。

我尝试了什么。

我已经尝试了 Ayyoub Dahhane 的建议，该建议非常有效，但目前它是硬编码的，哪些幻灯片是视频幻灯片，而这不可能。我尝试了一些其他代码，可以在以下位置看到： http://codepen.io/hennysmafter/pen/PNvEPN & http://codepen.io/hennysmafter/pen/MydEBw 我试着延迟工作。 Codepen 已经更改，因此没有 link。但是还是不行。

我发现事实证明这太难了，这绝对是疯了。所以在这里我最近的尝试是有效的，但在控制台中显示了几个错误，它仍然需要双击：http://codepen.io/hennysmafter/pen/aNrVKG?editors=1010

回到绘图板。

Answer 1

     $(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();
          });   
});
})

Link 测试 Here

Answer 2

正如我被问到的那样，这是我在中的回答：

我找到了导致问题的原因：

单击跨度时，您正在播放其父级具有“.current”class 的元素。

但是当您单击一个元素时，它会显示“.show”class，并且之前选择的跨度会显示“.hide”class 并保持“.current”class，直到动画完成（然后“.show”和“.hide”class被移除，“.current”class切换元素）。

一种解决方案是像这样更改选择器：

$(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”class 的元素，并播放其父级具有“.show”的元素class .

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

tiltSlider play/pause 个视频元素，如果 li 当前有 class 个

tiltSlider play/pause video elements if li has class current

javascript

jquery

html5-video