如何从另一组更大的按钮中单独更改一组按钮中的按钮颜色

Question

我想在单击时单独更改按钮颜色。

要求：

1. 按钮默认颜色：灰色，第一次单击：绿色，第二次单击：红色，第三次单击：返回灰色。
2. 该按钮位于另一组更大颜色的按钮组中。

我被困在 JS 中。我不确定如何更改按钮颜色（灰色、红色和绿色）。

请帮忙。

var SafetybtnColor = document.getElementsByClassName('Safetybtn');
var Safetybtns = document.querySelectorAll('button.Safetybtn');
SafetybtnColor.onclick = function() {
 
}

<h>Group 1</h>
<div style="position:relative; top:5px" class=Safetybtn>
          <button id="s1">1</button>
          <button id="s2">2</button>
          <button id="s3">3</button>
          <button id="s4">4</button>
          <button id="s5">5</button>
</div>
<br>
<h> Group 2</h>
<div style="position:relative; top:5px" class=QualityIntbtn>
          <button id="qi1">1</button>
          <button id="qi2">2</button>
          <button id="qi3">3</button>
          <button id="qi4">4</button>
          <button id="qi5">5</button>
</div>
          
          

Answer 1

你想创建一个颜色数组来遍历，并将每个按钮的 onclick 分配给一个函数来旋转颜色。

我稍微调整了您的 html 以添加一个类，以便于识别哪些按钮应该具有此功能。还添加了一个 data-* 属性来保存每个按钮的当前“颜色”值。这是每个按钮的状态。

<h>Group 1</h>
<div style="position:relative; top:5px" class=Safetybtn>
          <button id="s1" class="colorable" data-color="0">1</button>
          <button id="s2" class="colorable" data-color="0">2</button>
          <button id="s3" class="colorable" data-color="0">3</button>
          <button id="s4" class="colorable" data-color="0">4</button>
          <button id="s5" class="colorable" data-color="0">5</button>
</div>
<br>
<h> Group 2</h>
<div style="position:relative; top:5px" class=QualityIntbtn>
          <button id="qi1" class="colorable" data-color="0">1</button>
          <button id="qi2" class="colorable" data-color="0">2</button>
          <button id="qi3" class="colorable" data-color="0">3</button>
          <button id="qi4" class="colorable" data-color="0">4</button>
          <button id="qi5" class="colorable" data-color="0">5</button>
</div>

javascript 相当简单

var colors = [
    "lightgray", "green", "red"
];

var btns = document.getElementsByClassName("colorable");
for (idx = 0; idx < btns.length; idx++) {
    var btn = btns[idx];

    btn.onclick = function() {
        var colorIndex = parseInt(this.getAttribute("data-color")) + 1

        if (colorIndex > 2) {
            colorIndex = 0;
        }

        this.setAttribute("data-color", colorIndex);
        this.style.background = colors[colorIndex];
    }
}

颜色数组可以是 rgb 值或其他值。为了简单起见，我使用了名称。

小提琴：https://jsfiddle.net/ns56c34u/

Answer 2

对于初学者，您需要在类名周围加上引号。另外，请注意button.Safetybtn 不是一个有效的选择器，因为您的按钮没有类它们自己。您正在寻找 .Safetybtn button，因为按钮是 child 或 Safetybtn 类。您还可以使用 child combinator > 来表示 直接 孩子，.Safetybtn > button。

现在您已经有了一组按钮，您需要使用简单的for 循环来循环它们。在该循环中，只需为每个Safetybtns[i] 设置onclick，其中您可以使用this.style.backgroundColor 使用style property 更改颜色。

请注意，按钮的实际背景“灰色”是一种相当特殊的颜色：rgb(221, 221, 221)。

您需要一个索引（在我的示例中为 selectColour），每次单击按钮时该索引都会增加。一旦它比您循环的颜色数少一，您还需要将其设置回零（以重置循环）。

我不确定您的确切要求，但这里有一个示例，它将red、green 和grey 三种颜色存储为一个数组，并在它们之间随时交换任何按钮被点击：

var Safetybtns = document.querySelectorAll('.Safetybtn button');

var colours = ['green', 'red', 'rgb(221, 221, 221)'];
var selectedColour = 0;

for (var i = 0; i < Safetybtns.length; i++) {
  Safetybtns[i].onclick = function() {
    this.style.backgroundColor = colours[selectedColour];
    if (selectedColour != colours.length - 1) {
      selectedColour++;
    }
    else {
      selectedColour = 0;
    }
  }
}

<h>Group 1</h>
<div style="position:relative; top:5px" class="Safetybtn">
  <button id="s1">1</button>
  <button id="s2">2</button>
  <button id="s3">3</button>
  <button id="s4">4</button>
  <button id="s5">5</button>
</div>
<br>
<h> Group 2</h>
<div style="position:relative; top:5px" class="QualityIntbtn">
  <button id="qi1">1</button>
  <button id="qi2">2</button>
  <button id="qi3">3</button>
  <button id="qi4">4</button>
  <button id="qi5">5</button>
</div>

希望这会有所帮助！ :)

Answer 3

听起来您需要为每个按钮单击counter，以便每次更改为特定颜色。

您可以为每个按钮添加一个自定义属性，例如 data-clikcs="0" 以用作计数器，但我将只使用按钮的 title 进行存储，因为它更容易：

<button id="s1" onclick="this.title=Number(this.title)+1; CycleColor(this.id,this.title)" title="0">1</button>

<button id="s2" onclick="this.title=Number(this.title)+1; CycleColor(this.id,this.title)" title="0">2</button>

<button id="s3" onclick="this.title=Number(this.title)+1; CycleColor(this.id,this.title)" title="0">3</button>

我们需要一个函数，每个按钮都会调用它来改变它的颜色...

function CycleColor(Which, ClickNum){
    var B=document.getElementById(Which);

    if(ClickNum=='1'){B.style.background='green';} 
    else if(ClickNum=='2'){B.style.background='red';} 
    else {B.style.background='grey';} 
}