我該如何簡化這個AddClass/RemoveClass代碼？

我做了這個非常簡單的代碼按鈕點擊。單擊一個按鈕將其css類別更改爲活動，並刪除所有其他按鈕的活動類。這是我如何做到的：我該如何簡化這個AddClass/RemoveClass代碼？

jQuery(document).delegate("#today_button","click",function(){ 
    jQuery("#today_button").addClass("active"); 
    jQuery("#tomorrow_button").removeClass("active"); 
    jQuery("#some_other_day_button").removeClass("active"); 
}); 

jQuery(document).delegate("#tomorrow_button","click",function(){ 
    jQuery("#tomorrow_button").addClass("active"); 
    jQuery("#today_button").removeClass("active"); 
    jQuery("#some_other_day_button").removeClass("active"); 
}); 

jQuery(document).delegate("#some_other_day_button","click",function(){ 
    jQuery("#some_other_day_button").addClass("active"); 
    jQuery("#today_button").removeClass("active"); 
    jQuery("#tomorrow_button").removeClass("active"); 
});

有沒有更好的方法呢？如果是這樣，請讓我知道:)

來源

2011-12-28 pufAmuf

什麼是您的html結構？按鈕是否是兄弟姐妹？你可以展示一個[JS小提琴演示]（http://jsfiddle.net/）來重現你的代碼供我們玩嗎？ – 2011-12-28 15:43:22

添加CSS類 - canBeActive -to所有三個按鈕，然後做這一切與點擊處理器

jQuery(document).delegate(".canBeActive", "click", function() { 
    jQuery(".canBeActive").removeClass("active"); 
    jQuery(this).addClass("active"); 
});

你使用jQuery 1.7？如果是這樣，請考慮從delegate更改爲on

jQuery(document).on("click", ".canBeActive", function() { 
    jQuery(".canBeActive").removeClass("active"); 
    jQuery(this).addClass("active"); 
});

來源

2011-12-28 15:44:50

@ pufAmuf - 我的榮幸。祝你好運！ – 2011-12-28 18:59:21

編寫一個函數，刪除所有元素上的active，然後將其設置爲您單擊的元素。這確實有助於可伸縮性，但性能可能會稍低（實際上可以忽略不計）。

這種方法甚至可能允許您使用this來引用被點擊的元素，這意味着您現在或以後添加的所有按鈕只需要一個函數。

來源

2011-12-28 15:42:36

我該如何簡化這個AddClass/RemoveClass代碼？

回答

相關問題