onclick函數需要雙擊，因爲類分配延遲

標題說明了一切。我得到了LI元素的列表。當點擊導航時，活動的li獲得「當前」類，但這需要一秒鐘。但是，當我使用我的代碼，我需要點擊導航然後李打開，我需要再次點擊，使代碼註冊。視頻的位置不能被硬編碼！它需要是動態的。onclick函數需要雙擊，因爲類分配延遲

(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

不幸的是，我將無法用於接下來的一個小時左右，但之後會回來的！大家感謝你的幫助。

來源

2016-05-17 purple11111

OP正在使用http://tympanus.net/codrops/2014/03/13/tilted-content-slideshow/ – Seblor

我發現是什麼原因造成的問題：

正在播放，其父母有「.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）。

來源

2016-05-17 17:26:34 Seblor

非常感謝您的回答。我目前正在遛狗，並會在大約30-45分鐘內嘗試你的代碼。你是否在Codepen中試過你的代碼？ – purple11111

剛剛試過你的代碼，不僅僅是在Codepen中工作：http://codepen.io/hennysmafter/pen/LNodZd?editors=1010 它也在我需要它的網站上工作。非常感謝你爲這個代碼提供了很多幫助！ – purple11111

你能張貼這個答案也在：http://stackoverflow.com/questions/37277923/tiltslider-play-pause-video-elements-if-li-has-class-current/ 這是我第一個問題關於這個問題。我提出了另一個問題，因爲上一個問題中的代碼被改變了很多，所以它不再適合了。標題錯了。我已經發布了自己的答案，並明確指出，你是誰提供了答案，但它會更好，如果你發佈的答案，所以我可以upvote你，因爲你應得的學分，而不是我。 – purple11111

onclick函數需要雙擊，因爲類分配延遲

回答

相關問題