jquery - 如何简化此 AddClass/RemoveClass 代码？

Question

我为按钮点击编写了这个非常简单的代码。单击一个按钮会将其 css 类更改为 active，并删除所有其他按钮的 active 类。我就是这样做的:

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

有更好的方法吗？如果是这样，请告诉我:)

Answer 1

向所有三个按钮添加一个 css 类 - canBeActive，然后使用一键处理程序完成所有操作

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