如果li具有类电流，则tiltSlider播放/暂停video元素

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

要求

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

我试过了什么

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

我发现这绝对令人震惊，这被certificate是非常困难的。 所以这里我的最新尝试正在运行，但在控制台中显示了一些错误，它仍然需要双击： http ： //codepen.io/hennysmafter/pen/aNrVKG？edit = 1010

所以回到绘图板。

Answer 1

好吧，有人问我，这是我的onclick函数的答案需要双击因为类赋值延迟 ：

---

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

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

但是当你点击一个元素时，它就是“.show”类，之前选择的span获得“.hide”类并保持“.current”类，直到动画结束（然后是“.show”＆删除“.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”类的元素。

另一个解决方案应该是在应用类时创建一个事件（ 如果CSS类发生了变化，请参阅jQuery – Fire事件 ）。

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

链接到 这里 测试