Question

I made this very simple code for button clicks.
Clicking one button changes it’s css class to active, and removes the active class for all other buttons. This is how I made it:

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

Is there a better way of doing it? If so, please let me know 🙂

Answer 1

Add a css class—canBeActive—to all three buttons, then do it all with one click handler

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

Are you using jQuery 1.7? If so, consider switching from delegate to on

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