单击按钮时更改按钮颜色

Question

我的页面上连续有很多按钮。 当我单击“按钮”时，我需要更改按钮的颜色。 这是我的示例代码

 $( "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> 

在这里工作。 但是在这里，当我单击每个按钮时，颜色已更改。 我需要，当我单击一个按钮时，该按钮的颜色应仅更改，其余按钮的颜色应为默认颜色。

Answer 1

您需要在所有按钮上删除选定的类（这将清除先前选定按钮的样式），然后将其应用于单击的按钮。 同样，按钮需要具有唯一的ID或根本没有ID（此功能足以满足此要求），并且您应该使用CSS而不是双换行符来分隔按钮。

 $("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

像这样吗

 $( "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

试试这个JQuery代码

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

它的作用是，首先从每个按钮中删除.selected类，然后将该类仅应用于已单击的按钮。

Answer 4

以上答案效果很好。 但是如果您想在再次单击该按钮时禁用该按钮，请参见下面的代码段

 $( "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

首先，请不要对多个元素使用相同的ID。 ID应该是唯一的。

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

顺便说一句，您的代码工作正常， https： //jsbin.com/sicifopizi/edit