onclick函数需要双击，因为类分配延迟 [英] onclick function requires double click because of class assignment delay

问题描述

标题说的一切。我得到了一个LI元素的列表。当点击导航活动li获得一个类'current'，但这需要一秒钟。
但是当我使用我的代码，我需要点击导航，然后李打开，我需要再次点击让代码注册。
视频的位置不能硬编码！它需要是动态的。

The title says it all. I got a list of LI elements. When clicked on navigation the active li gets a class 'current' but this takes a second. But when I use my code I need to click on the nav then the li opens and I need to click again to make the code register. The place of the videos cannot be hardcoded! It needs to be dynamic.

(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

很遗憾，我不会可用于下一个小时左右，但会回来之后！

Unfortunately I won't be available for the next hour or so but will be back after that! Everyone thank you for helping.

推荐答案

我发现导致问题的原因：

I found what is causing the issue :

当单击span时，您正在播放其父类具有.current类的元素。

You are playing the elements whose parent has ".current" class when a span is clicked.

但是当您单击一个元素时，显示类，并且先前选择的范围获得.hide类并保持.current类，直到动画完成（然后去除.show&.hide类，当前类开关元素）。

But when you click an element, it et the ".show" class, and the previously selected span get the ".hide" class AND keeps the ".current" class, until the animation is finished (then the ".show" & ".hide" class are removed and the ".current" class switch elements).

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

One solution is changing the selectors like this :

$(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类的类。

By doing this, whenever a span is clicked, you pause the element whose parents have the ".hide" class, and play the ones whose parents have the ".show" class.

另一个解决方案应该是在应用类时创建一个事件（参见 jQuery - 如果CSS类更改则触发事件）。

Another solution should be creating an event when a class is applied (See jQuery - Fire event if CSS class changed).

这篇关于onclick函数需要双击，因为类分配延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！