Question

我正在为一个有新生儿的父母做一个项目，他们可以在学习照顾孩子方面取得进步。这将显示为按钮，当舞台完成时，它将更改该按钮上的颜色。

到目前为止，我的代码如下所示：将按钮颜色更改为绿色。

 {
  "id":1,
  "details":[
     {
        "name":abc,
     }
 }

    var count = 1;
    function setColor(btn, color) {
        var property = document.getElementById(btn);
        if (count == 0) {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }

当我点击第一个按钮“已指示”时，颜色变为绿色（正如我想要的那样）。但当我点击任何其他按钮时，第一个按钮再次变为绿色而另一个按钮变为蓝色？

如何修复它，以便点击它们的任何按钮都会显示为绿色？

Answer 1

你给了每个按钮id - 一个id应该识别，在这种情况下它不是。这里的代码采用标识为button的第一个元素，这就是每次第一个按钮发生变化的原因。

为每个单独的按钮使用不同的ID，或通过事件变量访问单击的元素本身。

您还只有一个计数变量，它不适用于多个按钮。想象一下你按下第一个按钮=＆gt; count现在是1。然后按第二个按钮，它不会变为绿色，因为count已经1。

您应该将该信息存储在元素本身上，可能包含data-count - 属性。

这是一个有效的例子：

function setColor(element) {
	if(!element.hasAttribute('data-count')){
  	element.setAttribute('data-count', 1);
  }
  
  var count = element.getAttribute('data-count');
  
  if(count == 0){
  	element.style.backgroundColor = '#ffffff';
    element.setAttribute('data-count', 1);
  }else{
  	element.style.backgroundColor = '#7fff00';
    element.setAttribute('data-count', 0);
  }
}

<div class="container">
      <h2>Change diaper</h2>
      <div class="well">
      <input type="button" value = "Instructed" style= "color:black" onclick="setColor(this)";/>
      <input type="button" value = "Done with help" style= "color:black" onclick="setColor(this)";/>
      <input type="button" value = "Done by yourself" style= "color:black" onclick="setColor(this)";/>
      </div>
    </div>

Answer 2

所以我们删除那些重复的ID，然后我们可以直接将该元素传递给函数，这样我们就不需要通过它的ID来获取它。

然后，我们不是使用count变量，而是将值存储在data属性中的实际元素上，以便它的状态存储在元素本身上。

function setColor(element) {
  if (element.getAttribute('data-done') === "0") {
    element.style.backgroundColor = "#7FFF00"
    element.setAttribute('data-done', "1");
  } else {
    element.style.backgroundColor = "#FFFFFF"
    element.setAttribute('data-done', "0");
  }
}

<div class="container">
  <h2>Change diaper</h2>
  <div class="well">
    <input type="button" id="button1" value="Instructed" style="color:black" onclick="setColor(this)" data-done="0" />
    <input type="button" id="button2" value="Done with help" style="color:black" onclick="setColor(this)" data-done="0" />
    <input type="button" id="button3" value="Done by yourself" style="color:black" onclick="setColor(this)" data-done="0" />
  </div>
</div>

尽管使用类和添加事件监听器可能是最语义的方式：

// Grab all the buttons by their class
var btns = document.querySelectorAll('.btn-diaper');

// Loop through the buttons
for (var i = 0; i < btns.length; i++) {
  // Assign a click listener to each button
  btns[i].addEventListener("click", function(event) {
    var el = event.toElement;
    
    // Toggle the "active" class, which changes the button styling
    if (el.classList.contains('active')) {
      el.classList.remove('active');
    } else {
      el.classList.add('active');
    }
  });
}

.btn-diaper {
  color: black;
  background-color: #fff;
}
.btn-diaper.active {
  background-color: #7fff00;
}

<div class="container">
  <h2>Change diaper</h2>
  <div class="well">
    <input class="btn-diaper" type="button" id="button1" value="Instructed" />
    <input class="btn-diaper" type="button" id="button2" value="Done with help" />
    <input class="btn-diaper" type="button" id="button3" value="Done by yourself" />
  </div>
</div>

按钮显示进度

2 个答案: