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小提琴）：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>

Answer 2

我将建议您解决问题的另一种方法。您可以使用的一件事是.grey和.blue类，其中包含背景颜色。然后，您需要做的就是将单击元素的类更改为.blue，并且由于您正在使用类，因此您可以使用选择器将其他项更改为.grey。以下是按钮的onclick事件：

var blueButton = document.querySelectorAll(".blue")[0];
if(this.className == "grey") {
    if( blueButton ) blueButton.className = "grey";
    this.className = "blue";
}

这意味着如果点击的按钮有一个类.grey，则将其更改为蓝色，将另一个按钮更改为document.querySelectorAll(".blue")[0]，因为在您的情况下只有一个蓝色按钮或没有蓝色按钮）到.grey。 if-statement是在更改它之前检查是否存在具有.blue类的元素。

完整的代码段如下：

＆＃13;

var buttons = document.querySelectorAll("button");
for(button in buttons) {
	buttons[button].onclick = function(){
        var blueButton = document.querySelectorAll(".blue")[0];
    	if(this.className == "grey") {
            if( blueButton ) blueButton.className = "grey";
            this.className = "blue";
        }
    }
}

＆＃13;

.grey{ background-color: grey; }
.blue{ background-color: blue; }

＆＃13;

<button class="grey">Click Me</button>
<button class="grey">Click Me</button>
<button class="grey">Click Me</button>
<button class="grey">Click Me</button>
<button class="grey">Click Me</button>
<button class="grey">Click Me</button>

＆＃13;

Answer 3

您可以做的是将所有其他按钮（当前选定的按钮除外）更改为深灰色。

function chcolor(btn) {
var property=document.getElementById(btn);
property.style.backgroundColor="#0099FF";
for(var i=1;i<=24;i++) {
if(!(btn=='btn'+i)) {
var property=document.getElementById('btn'+i);property.style.backgroundColor="#333333";}}
}

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

3 个答案: