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

Question

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

• 我尝试重做我的代码以及使用for循环，但是它也不起作用。

这是我的代码笔和我的代码： 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'); });
});

注意：-在此链接中.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'); } }); 

请看一下演示 。

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