javascript - 由于类分配延迟，onclick 函数需要双击

Question

标题说明了一切。我得到了 LI 元素的列表。单击导航时，事件 li 会获得“当前”类，但这需要一秒钟。 但是当我使用我的代码时，我需要点击导航然后 li 打开，我需要再次点击以注册代码。 视频的位置不能硬编码!它需要是动态的。

(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

不幸的是，我将在接下来的一个小时左右有空，但之后会回来!感谢大家的帮助。

Answer 1

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

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

但是当你点击一个元素时，它会得到“.show”类，而之前选择的 span 会得到“.hide”类并保持“.current”类，直到动画结束(然后是“.hide”类)。 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();
      });

});

通过这样做，无论何时点击一个 span，您都会暂停其父级具有“.hide”类的元素，并播放其父级具有“.show”类的元素。

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