單擊按鈕時更改按鈕顏色

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