Switch color of button on click (and revert color of other buttons without deselecting all the buttons on the page)

Question

I have many buttons divided into different panels and I would like to change the color of a button when I click it in jquery. I can not use the solution present in this discussion: Changing the Color of button on Click in bootstrap

$("button").click(function({$("button").removeClass("active");$(this).addClass("active");});

because I must have a button selected for each panel, and with this solution when I click on the button it also deselects me those of the other panels.

Sounds like your issue is with `$("button").removeClass("active")`. As @Alex Wu explains, this effects all buttons, not just the one you click. — PoorlyWrittenCode, May 03 '18 at 03:03

score 1 · Answer 1 · answered May 02 '18 at 23:37

What your code is doing

$("button").click(function({
  // this removes the "active" class from all buttons
  $("button").removeClass("active");
  $(this).addClass("active");
});

$("button") selects all of the buttons.

Suggestions:

This will "select" each button that is clicked

$("button").click(function({
  $(this).addClass("active");
});

If you want a click to "select" the button and then another click to "de-select" the button

$("button").click(function({
  $(this).toggleClass("active");
});

Switch color of button on click (and revert color of other buttons without deselecting all the buttons on the page)

1 Answers1