Question

我为按钮点击创建了这个非常简单的代码。单击一个按钮可将其css类更改为活动，并删除所有其他按钮的活动类。这就是我的成就：

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

Answer 2

编写一个函数，删除所有元素上的active，然后将其设置为您单击的元素。这确实有助于扩展，但性能可能略低（实际上可以忽略不计）。

这种方法甚至可以让你使用this来引用被点击的元素，这意味着你现在或以后添加的所有按钮只需要一个函数。

如何简化此AddClass / RemoveClass代码？

2 个答案: