javascript - 背景颜色不随 Javascript 改变？

Question

我正在尝试使用 forEach 循环遍历框网格并在单击时更改框颜色。但是由于某种原因，所有其他 css 样式都可以工作，但背景颜色。

• 我尝试重做我的代码以及使用 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