iNext10
@iNext10
Web Developing (Front End) Junior

Как в переменную через querySelector задать много div'ov?

Добрый день.
Я в JS нуб, и поэтому, столкнулся с такой проблемой
У меня на сайте есть вот такой вот блок:
5e674b22d5be7090377302.png

Имеются подблоки, которые выделены серым цветом на фоне. Они все имеют класс "item".
Нужно сделать так, чтобы по их нажатию происходило какое-то событие.
Но для начала, нужно задать эти "подблоки" в JS скрипте, но как это сделать?

Я пытался сделать так:
let block = document.querySelector('.item')

Но событие работало только по нажатию на первый блок

UPD:
5e674dc010a9c664369695.png
  • Вопрос задан
  • 144 просмотра
Решения вопроса 2
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
let itemCollection = document.getElementsByClassName('item');

        for (let i = 0; i < itemCollection.length; i++) {
            itemCollection[i].addEventListener('click', () => {
                alert('click on ' + itemCollection[i].innerText);
            })
        }

Вот живой пример
Ответ написан
sniggering_deus
@sniggering_deus
Mother is a god in the eyes of a child.
const contGame = document.querySelector(".game");
const activeClass = "game__item__active";

contGame.addEventListener("click", function(event) {
  const contItem = event.target.closest(".game__item");
  if (!contItem) return;

  const activeElement = contItem.parentElement.querySelector(
    ".game__item__active"
  );
  activeElement && activeElement.classList.remove(activeClass);
  contItem === activeElement || contItem.classList.add(activeClass);
});


Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@abberati
frontend-разработчик
Кроме прочих ответов советую разобраться с «делегированием событий». Это более оптимальный способ решить вашу задачу.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы