Question

我有以下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 = ""
      }
    }
 });
}

我想在点击每个项目时更改颜色，而是在所有项目上更改颜色。如何更改颜色，仅限于单击的元素？

Answer 1

您正在遍历处理程序中的所有<div>。一个更简单的方法是：

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"
}

在这种情况下，this指的是被点击的元素。

Answer 2

不是循环遍历所有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'
});

或者：

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';
}

此外，您需要将Javascript代码包装在<script> /* JS here */ </script>代码中。

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

2 个答案: