如何刪除類當我單擊我想要刪除的類

$('.option').click(function(){ 
     $(this).addClass('selected'); 
     }); 
    $('.selected').click(function(){ 
     $(this).removeClass('selected'); 
     });

嘗試刪除選定的類時，我單擊具有類（選定）的元素。如何刪除類當我單擊我想要刪除的類

addClas工作，但刪除沒有。：/

來源

2013-07-26 user1804119

您需要委派事件。 – pmandell

您的問題是您將事件附加到尚未準備好接收該事件的元素。您應該將事件附加到父元素，然後您可以篩選.selected。這樣，當你的可點擊元素被添加時它並不重要，它可以工作。這被稱爲事件代表團。您正在將處理事件的任務委託給另一個元素。

您的JS：

$(document).on("click", ".selected", function() { 
    $(this).removeClass('selected'); 
}); 

$(document).on("click", ".option", function() { 
    $(this).addClass('selected'); 
});

如果您不需要在各個按鈕不同的功能（我假設你會）你可以兩者結合成這樣：

$(document).on('click','.selected.option',(function() { 
    $(this).toggleClass('selected'); 
});

此外，當這樣做，不要將其附加到樹上太高的父級。您想將它附加到最近的可能父元素。我們不需要像document這樣的點擊事件，因爲明確哪些元素會獲得此事件是個不錯的主意。將它附加到document將意味着任何具有.selected級別的元素都將可點擊並響應相同的代碼。如果您想在不同的按鈕中使用不同的功能，則不能，因爲它們都響應與document相同的代碼。

來源

2013-07-26 17:49:06

謝謝，現在我終於明白了。：D – user1804119

with'toggleClass'你不一定需要'.on（）'，你仍然可以使用'$（'。option'）。click（function（）{$（this）.toggleClass（'selected'） }）;'因爲在這種情況下'.option'選擇器不會改變（唯一的變化是是否存在'selected'類） – MikeM

@MikeM yes你是對的，不需要委託那種情況。如果在處理程序之後引入'.option'元素，則會出現異常。 –

您可以使用toggleClass。

$('body').on('click', '.option', function() { 
    $(this).toggleClass('selected'); 
});

來源

2013-07-26 17:46:17

添加'.on（）'代表團，這是最好的答案。 – DevlshOne

在目標選擇器中刪除'.selected'，我的不好 –

$('.option').on('click', function(){ 
    if(!$(this).hasClass("selected")) { 
     $(this).addClass('selected'); 
    } 
}); 
$('.selected').on('click', function(){ 
    $(this).removeClass('selected'); 
});

但是，你會得到最好的使用切換類的方法！

來源

2013-07-26 17:50:59

如何刪除類當我單擊我想要刪除的類

回答

相關問題