单击按钮时更改按钮颜色

Question

I have many button in a row in my page. And I need to change the button color, when I click on the Buttons. Here is My sample code

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

 .Button { font-family: Calibri, sans-serif; font-size:13px; font-weight: bold; width: 160px; height: 25px; background:grey; color: white } .selected { color: white; background:green } button#cssColorChange:active{ color: white; background:red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <button class="Button change" id="jQueryColorChange">Click to change color</button> <br><br> <button class="Button change" id="jQueryColorChange">Click to change color</button> <br><br> <button class="Button change" id="jQueryColorChange">Click to change color</button> <br><br> <button class="Button change" id="jQueryColorChange">Click to change color</button> 

Here it is Working. But here when I click on every buttons, color has been changed. I need, When I click on one Button, color should change for that Button only and the remaining Buttons color should default.

Answer 1

You need to remove the selected class on all the buttons (which clears the styling of the previously selected button) and then apply it to the clicked one. Also the buttons need to have unique ID's or none at all( the clas is sufficient for this function) and you should space the buttons out with CSS rather than the double line breaks.

 $("button.change" ).click(function() { $(".change" ).removeClass('selected'); $(this).addClass( "selected" ); }); 

 .Button { font-family: Calibri, sans-serif; font-size:13px; font-weight: bold; width: 160px; height: 25px; background:grey; color: white; display:block; margin: 1em; } .selected { color: white; background:green } button#cssColorChange:active{ color: white; background:red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <button class="Button change">Click to change color</button> <button class="Button change">Click to change color</button> <button class="Button change" >Click to change color</button> <button class="Button change">Click to change color</button> 

Answer 2

Something like this?

 $( "button.change" ).click(function() { $( "button.change.selected" ).removeClass("selected"); $(this).toggleClass( "selected" ); }); 

 .Button { font-family: Calibri, sans-serif; font-size:13px; font-weight: bold; width: 160px; height: 25px; background:grey; color: white } .selected { color: white; background:green } button#cssColorChange:active{ color: white; background:red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <button class="Button change" id="jQueryColorChange">Click to change color</button> <br><br> <button class="Button change" id="jQueryColorChange">Click to change color</button> <br><br> <button class="Button change" id="jQueryColorChange">Click to change color</button> <br><br> <button class="Button change" id="jQueryColorChange">Click to change color</button> 

Answer 3

Try this JQuery code instead

$( "button.change" ).click(function() {
  $('button').removeClass( "selected" );
  $(this).toggleClass( "selected" );
});

What this does is, first removes .selected class from every button and then applies the class to only the button which has been clicked.

Answer 4

the above answers work very good . but IF you want to disable the button when you click again on it, see snippet below

 $( "button.change" ).click(function() { $(this).toggleClass( "selected" ); $("button.selected").not(this).removeClass("selected") }); 

 .Button { font-family: Calibri, sans-serif; font-size:13px; font-weight: bold; width: 160px; height: 25px; background:grey; color: white } .selected { color: white; background:green } button#cssColorChange:active{ color: white; background:red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="Button change" id="">Click to change color</button> <br><br> <button class="Button change" id="">Click to change color</button> <br><br> <button class="Button change" id="">Click to change color</button> <br><br> <button class="Button change" id="">Click to change color</button> 

Answer 5

First of all, please don't use the same id for multiple elements. Id's should be unique.

$('button.change').click(function() {
  $(this).toggleClass('selected');
})

your code is working fine btw, https://jsbin.com/sicifopizi/edit