Функция щелчка Javascript работает только с первым элементом
У меня есть простая функция щелчка в Javascript, которую я пытаюсь заставить работать. Проблема, с которой я столкнулся, заключается в том, что функция щелчка работает только для первого элемента с классом, и я бы хотел, чтобы она срабатывала, когда вы щелкаете любые элементы с классом.
const element = document.querySelector('.js-element')
if ( element ) element.addEventListener('click', function () {
alert('click');
})
Может ли кто-нибудь посоветовать, где я ошибаюсь?
Спасибо
... то вам просто нужен querySelectorAll(), можно по результату .forEach().
потому что querySelector выбирает только первый.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
The
querySelector()method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
Чтобы присоединить событие ко всем элементам с классом js-element, вы должны выбрать весь элемент с помощью querySelectorAll(), а затем использовать цикл для итерации и присоединения события, как показано ниже.
Кроме того, здесь не требуется условие если.
const element = document.querySelectorAll('.js-element')
element.forEach(function(el){
el.addEventListener('click', function () {
alert('click');
});
});
Используйте querySelectorAll()
const element = document.querySelectorAll('.js-element');
if (element.length !== 0) {
for (var i=0; i<element.length; i++) {
element[i].addEventListener('click', function () {
alert('click');
});
}
}
The Element method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
Спасибо за ваш ответ :) Мне также было интересно, как настроить таргетинг на элементы, которые в настоящее время скрыты (display: none;), а затем они отображаются с помощью другой функции щелчка. Похоже, что querySelectorAll нацелен только на видимые элементы.
@ heady12 It looks like querySelectorAll only targets the visible elements - Нет, он нацелен на все элементы, которые физически находятся в DOM, видимые или нет. Если вы думаете, что он не возвращает скрытые элементы, создайте jsFiddle или аналогичный тестовый образец и console.info()innerText каждого элемента или аналогичный внутри вашего цикла, чтобы увидеть, что элементы с display:none включены. - https://jsfiddle.net/qpkt0nuf/ Измените по мере необходимости, чтобы проверить свой собственный сценарий.
Вы использовали
querySelector. Это означает, что вы выбрали один элемент и добавили слушателя к этому одному элементу. Либо используйтеquerySelectorAllи добавьте слушателя к каждому элементу, либо добавьте слушателя в контейнер (или тело) и используйте делегирование событий