Question

我想制作一款游戏，您可以通过单击正方形来找出颜色组合。问题是我无法弄清楚如何使每个单独的正方形都改变颜色，而是同时改变所有颜色。我看了几个w3schools和mozilla教程，但是它们没有我想要的东西。

let box = document.querySelectorAll('[data-box]')
for (i = 0; i < box.length; i++) {
  box[i].addEventListener('click', () => {
    box.forEach(color => {
      color.style.backgroundColor = "green"
    })
  })
}

div.box {
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid black;
}

<div class="box" data-box></div>
<div class="box" data-box></div>
<div class="box" data-box></div>
<div class="box" data-box></div>

Answer 1

它们都立即更改，因为您正在使用box.forEach()来指示它们立即进行所有更改。

您只应更改当前点击事件的target框：

let box = document.querySelectorAll('[data-box]');
for (i = 0; i < box.length; i++) {
  box[i].addEventListener('click', (e) => {
      e.target.style.backgroundColor = "green";
  })
}

div.box {
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid black;
}

<div class="box" data-box></div>
<div class="box" data-box></div>
<div class="box" data-box></div>
<div class="box" data-box></div>

或者，遍历这些框并在当前迭代目标上调用事件侦听器：

let box = document.querySelectorAll('[data-box]');

box.forEach(b => b.addEventListener('click', () => b.style.backgroundColor = 'green'));

div.box {
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid black;
}

<div class="box" data-box></div>
<div class="box" data-box></div>
<div class="box" data-box></div>
<div class="box" data-box></div>

定位特定类别的属性而不重复

1 个答案: