javascript - 如何选择和更改按钮的颜色并在单击其他按钮时恢复为原始颜色

Question

我有一组 24 个按钮。均为深灰色 (#333333) 颜色。当我点击其中任何一个我可以做到的时候，我希望它们转换为蓝色 (#0099ff)，但之后当我点击其他按钮时，前一个按钮的颜色仍然是蓝色，而新按钮被点击一个也变蓝了。我想让前一个恢复到原来的颜色，即。到深灰色。我正在使用这段代码:

function chcolor(btn) {
var property=document.getElementById(btn);
property.style.backgroundColor="#0099FF";
}

for($i=1;$i<25;$i++) {
echo "<input type=submit value=&gt; id=btn".$i." onclick=chcolor('btn".$i."');>";
}

Answer 1

使用 jQuery。

工作示例(JS Fiddle):https://jsfiddle.net/xt1p9y4r/1/

<style>

  input[type=button] {
    background-color: #333333;
    color: white;  
  }

  input[type=button].blue {
    background-color: #0099ff; 
  }`enter code here`

</style>

<div class = "buttons">
</div>

<script>

  for (i = 1; i <= 25; i++) {

    $(".buttons").append("<input class = 'button' type = 'button' value = 'Button " + i + "'><br>");

  }

  $(".button").click(function () {

    $(".button").removeClass("blue"); // Remove 'blue' CSS Class from all Buttons

    $(this).addClass("blue");

  });

</script>