Javascript 在纯JS中单击时更改元素的颜色

我有以下JS代码：

<div> item1 </div>
<div> item2 </div>
<div> item3 </div>

var x = document.querySelectorAll('div');

for(var i = 0; i < x.length; i++){
  x[i].addEventListener("click", function (){
    for(var i = 0; i < x.length; i++){
      if(x[i].style.color === ""){
        x[i].style.color = "red"
      } else {
        x[i].style.color = ""
      }
    }
 });
}

item1
项目2
项目3
var x=document.querySelectorAll（'div'）；
对于（变量i=0；i

---

我想改变颜色点击每一个项目，而不是我得到的颜色都改变了。如何更改颜色并仅更改单击的元素？

您正在处理程序中的所有

循环。更简单的方法是：

for(var i = 0; i < x.length; i++) {
  if (x[i] !== this) {
    x[i].style.color = "";
  }
}
if (this.style.color === "red") {
  this.style.color = "";
} else {
  this.style.color = "red"
}

for（变量i=0；i

---

在本例中，

此

指的是被单击的元素。

与其循环遍历所有div并向其添加侦听器，不如只向窗口添加一个侦听器，如果它是div，则更改其颜色

window.addEventListener('click', function(event) {
    const target = event.target; // what you clicked on
    if(target.tagName !== 'DIV') {
        return; // not a <div>, stop the function
    }

    const color = target.style.color;
    target.style.color = color? '' : 'red'; // color is set then clear it, otherwise set to 'red'
});

---

另外，您需要将Javascript代码包装在

/*JS here*/

标记中。

您可以使用三元运算符：

this.style.color=this.style.color===“”？“红色”：“

@Tushar不太清楚，尤其是对于一个新的编码员。谢谢你，但是如果我只想将一个元素选为红色怎么办？@Alex你是什么意思？如果你把它放在事件处理程序中，那么它应该只改变点击的元素。我的意思是，当其中一个元素被选中为红色时，如何防止其他元素被选中为红色？与单选按钮类似，但仅具有颜色

const divs = document.querySelectorAll('div');
Array.from(divs).forEach(div => {
    div.addEventListener('click', changeColor);
});

function changeColor() {
    let color = this.style.color;
    this.style.color = color? '' : 'red';
}