Question

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

要求：

按钮默认颜色：灰色，第一次点击：绿色，第二次点击：红色，第三次点击：返回灰色。
按钮位于另一组较大颜色的按钮组中。

我被困在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];
    }
}

colors数组可以是rgb值或者其他什么。我简单地使用了名字。

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

Answer 2

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

现在您已经拥有了一组按钮，您将需要使用简单的for循环遍历它们。在该循环中，只需为每个onclick设置Safetybtns[i]，其中您可以使用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';} 
}

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

3 个答案: