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”类，直到动画结束（然后是“。显示“＆amp;”.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”类的元素。

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

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

1 个答案: