Почему скрипт работает только на первом объекте класса?

Question

[partyzanx]

На странице есть несколько дивов с классом jiegou. Для них есть скрипт - при клике открыть другую страницу. Но этот скрипт почему-то работает только для первого дива класса jiegou. Как это исправить?

Почему скрипт работает только на первом объекте класса?

<div class="jiegou">
<p> 这样 + 的
</p>
</div>

<script> 
document.querySelector('.jiegou').addEventListener('click', function() {
window.open("/publ/spravochnik/glossarij/25");
});
</script>

Answer 1

[Михаил]

querySelector выбирает только первое совпадение, вам необходимо использовать querySelectorAll и проходить циклом по результату навешивая события на каждый элемент.
Например так:

var elements = document.querySelectorAll('.jiegou');
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {
       window.open("/publ/spravochnik/glossarij/25");
    });
}

Comments

[partyzanx]

а что в скрипте изменить, подскажите, пожалуйста

[Михаил]

partyzanx: привел пример.

[partyzanx]

Михаил: спасибо большое!

[partyzanx]

Михаил: подскажите, пожалуйста, как сделать чтобы и этот скрипт работал для каждого класса?

<span class="pi">二</span> "Er" и <span class="pi">两</span> "liang"

<script>
;(function(){
 var player = new Audio()
 var buttons = document.querySelectorAll('.pi')
 buttons.forEach(btn => btn.addEventListener('click', play))

 function play(evt) {
 let sound = evt.target.textContent
 player.src = `https://translate.google.ps/translate_tts?tk=505935|7C631501&ie=UTF-8&tl=zh&total=1&idx=0&textlen=8&client=tw-ob&q=${sound}`
 player.play();
 }
})();
</script>