由于类赋值延迟，onclick函数需要双击

标题说明了一切。 我有一个LI元素列表。 单击导航时，活动的li会获得“当前”类，但这需要一秒钟。 但是当我使用我的代码时，我需要单击导航然后li打开，我需要再次单击以使代码注册。 video的位置无法硬编码！ 它需要是动态的。

(function($) { $(document).ready(function(){ $('video').each(function() { $(this).get(0).pause(); }); $('.slides').children('li').addClass('test'); }); $(document).on('click','span',function(){ if ( $('li').hasClass('current') ) { $('li.test').find('video').each(function() { $(this).get(0).pause(); }); $('li.current.test').find('video').each(function() { $(this).get(0).play(); }); } }); })(jQuery); 

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

不幸的是，我不会在接下来的一个小时左右上class，但会在那之后回来！ 每个人都感谢你的帮助。

Answer 1

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

单击某个范围时，您正在播放其父级具有“.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事件 ）。