addClass removeClass bug jQuery

Question

我想寫一個jQuery代碼，只需在點擊上切換類，所以我有兩個元素之一與類視頻 - 留下其他視頻中間，並點擊它們切換類，這是工作在消防錯誤的類開關以及它們的位置（這是與班），但是當我點擊第二次jQuery的行爲，如果類沒有改變... followig是代碼：

$('.video-left').click(function(){ 
    $('.video-middle').addClass('video-left'); 
    $('.video-middle').removeClass('video-middle'); 
    $(this).addClass('video-middle'); 
    $(this).removeClass('video-left'); 
}); 
$('.video-middle').click(function(){alert('middle');}); 

所以如果我先點擊左邊，那麼現在剩下的就會觸發警報。

Answer 1

當你做這樣的事情$('.video-left').click() click事件連接到元素，不的類。也就是說，如果元素的類發生更改，則單擊事件不會更改，因爲事件附加到元素本身。

在這種情況下，當您想將事件附加到類時，應該使用.on()，每當用戶單擊該元素時都會單獨選中該選擇器。

$(document).on('click', '.video-left', function(e) { 
    // ... 
}); 

（你也可以使用視頻元素，而不是document的任何父母，只要他們沒有在任何時候更改。）

Answer 2

你做錯了

你做的是什麼附加事件的元素，你不重視要素類，你想

而當你點擊元素上每一次，這是。視頻左駐留在第一次點擊（）執行的功能。同一個

你應該做的，是類「視頻」添加到所有的元素和附加共同的事件

$('.video').click(function(){ 
if($(this).hasClass('.video-left')) {do_something1();return} 
if($(this).hasClass('.video-middle')) {do_something2();return} 
}) 

Answer 3

類視頻左添加到這兩個元素，並添加類「video-中間」（連同‘視頻左’的元素，你想‘的視頻中’是默認。

<div class='video-left'></div> 
<div class='video-left video-middle'></div> <!--default video middle --> 

然後

$('.video-left').click(function(){ 
    $('.video-middle').removeClass('video-middle'); 
    $(this).addClass('video-middle'); 
} 

Answer 4

通過使用'click'事件，您沒有持久性選擇器，因此當您刪除video-left類而沒有重新綁定時，它將不再處理該事件。

$('.video-left').on('click', function(event) { 
    $('.video-middle').addClass('video-left').removeClass('video-middle') 
    $(this).addClass('video-middle').removeClass('video-left') 
}) 


$('.video-middle').on('click', function(){ alert('middle'); })