нацеливание на определенный атрибут класса без повторения - PullRequest
Новая
       30

нацеливание на определенный атрибут класса без повторения

1 голос
/ 23 сентября 2019

Я хотел создать игру, в которой вы могли бы определить цветовую комбинацию, нажимая на квадраты.Проблема в том, что я не могу понять, как заставить каждый отдельный квадрат менять цвета, вместо этого все они меняются сразу.Я просмотрел несколько учебных пособий по 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>

1 Ответ

1 голос
/ 23 сентября 2019

Все они меняются сразу, потому что вы используете 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>
...