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

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 值或其他值。为了简单起见，我使用了名称。

fiddle :https://jsfiddle.net/ns56c34u/