Как перебрать коллекцию элементов?

Question

HTML:

<div class="info-block">
  <img src="photo.jpg" alt="фотография" class="hidden">
  <img src="photo2.jpg" alt="фотография" class="hidden">
  <inframe width="789" height="444" src="https://www.youtube.com/watch?v=4QHFhIjF2L0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="hidden">
</div>
<div class="info-block">
  <img src="photo.jpg" alt="фотография" class="hidden">
  <img src="photo2.jpg" alt="фотография" class="hidden">
  <inframe width="789" height="444" src="https://www.youtube.com/watch?v=4QHFhIjF2L0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="hidden">
</div>

CSS:

.hidden{
  display: none;
}

JS:

function show(){
    var button = document.querySelector('.info-block');
    var img = document.querySelector('img');
    var iframe = document.querySelector('iframe');

    button.addEventListener('click', function(){
        iframe.classList.toggle('hidden');
        img.classList.toggle('hidden');
    });
};

show();

Код должен скрывать и показывать картинки и видео по щелчку на <div class="display-block">. Он это делает, но только для первого изображения и первого видео в первом блоке. На остальные не работает. Поискав информацию по этой теме, я выяснил, что button.addEventListener() не работает для коллекции элементов и при помощи цикла эту коллекцию нужно перебрать и присвоить каждому элементу свой addEventListener. Только вот я так и не понял, как правильно составить такой цикл. Подскажите, пожалуйста

Answer 1

  function show(){
    var buttons = document.querySelectorAll('.info-block');
    buttons.forEach(el => 
      el.addEventListener('click', function(){
        this.querySelectorAll('img').forEach(img => img.classList.toggle('hidden'));
        this.querySelector('iframe').classList.toggle('hidden');
      });
    );
  }

  function show(){
    var buttons = document.querySelectorAll('.info-block');
    buttons.forEach(btn => 
      btn.addEventListener('click', function(){
        this.querySelectorAll('*').forEach(el => el.classList.toggle('hidden'));
      });
    );
  }

БЛОГ НА HUSL

Как перебрать коллекцию элементов?

Ответы (1 шт):