tiltSlider播放/暂停视频内容，如果李娜类电流

Question

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

问题。

当用户点击第三个导航按钮时，li元素尚未将定制类指定给它。所以现在需要用户在同一个导航按钮上手动点击第二次（这显然很愚蠢）。

要求

与视频元素锂可以是任意滑动，所以我不能硬编码。

什么有我试过了。

我已经尝试Ayyoub Dahhane建议，它出色地工作，但目前它是硬编码幻灯片是视频幻灯片，这是不可能的。 我已经尝试了一些其他的代码，可以看到： http://codepen.io/hennysmafter/pen/PNvEPN & http://codepen.io/hennysmafter/pen/MydEBw 我试着延迟工作。 Codepen已经改变了，所以没有链接。但它无论如何都不起作用。

我发现它绝对是疯狂的，这证明这是非常困难的。所以在这里我的最新尝试正在工作，但在控制台中显示了一些错误，并且仍然需要双击：http://codepen.io/hennysmafter/pen/aNrVKG?editors=1010

因此回到绘图板。

Answer 1

好，因为我是问，这里是从onclick function requires double click because of class assignment delay我的答案：

---

我发现是什么原因造成的问题：

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

但是，当您单击某个元素时，它会显示“.show”类，而之前选定的范围将获得“.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”类。

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

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

链接，测试 Here