Question

我正在尝试使用forEach循环来遍历一系列网格，并在单击时更改它们的颜色。但是由于某种原因，其他所有CSS样式都可以使用backgroundcolor。

我尝试重做我的代码以及使用for循环，但是也没有用。

这是我的Codepen和我的代码： https://codepen.io/Fairy121/pen/dBGYRQ

var sqrs = document.querySelectorAll('.sqr');

function changeCol(event) {
  console.log(event.target);
  event.target.classList.toggle('my_choice');
}

sqrs.forEach(sqr => sqr.addEventListener('click', changeCol));

.my_choice {
  border: 3px solid black;
  color: white;
  background-color: green;
}

<div class='sqr-grid'>
  <div class='sqr'>0</div>
  <div class='sqr'>1</div>
  <div class='sqr'>2</div>
  <div class='sqr'>3</div>
  <div class='sqr'>4</div>
  <div class='sqr'>5</div>
  <div class='sqr'>6</div>
  <div class='sqr'>7</div>
  <div class='sqr'>8</div>
</div>

Answer 1

简单的解决方案：-

var sqrs = document.querySelectorAll('.sqr');
sqrs.forEach(sqr => {

  sqr.addEventListener('click', function(){sqr.classList.toggle('my_choice'); });
});

注意：-：在this链接中，.my_choice的样式为空，因此添加background:green并同时删除.one

Answer 2

在代码笔上的CSS代码中存在问题：

.one
.my_choice{
  
}

实际上，您只能使用一个事件侦听器并检查事件目标以动态切换my_choice css类中具有sqr css类的任何元素。

document.querySelector('.sqr-grid').addEventListener('click', function(event) {
  var target = event.target;
  if (target.classList.contains('sqr')) {
    target.classList.toggle('my_choice');
  }
});

请看看demo。

Answer 3

您需要设置class属性

var sqrs = document.querySelectorAll('.sqr');

function changeCol(event) {
 console.log(event.target);
  event.target.setAttribute('class','my_choice');
}

sqrs.forEach(sqr => {
  sqr.addEventListener('click',changeCol);
});

背景颜色不会随着Javascript改变吗？

3 个答案: