Как выбрать конкретные элементы с JS, которые создаются динамически?

Question

<div class="gallery-container">
   <?php while (have_rows('gallery')): ?>
   [...]
      <div class="toggle-container">
         <button class="toggle-button active" onclick="gridView()">Grid</button>
         <button class="toggle-button" onclick="listView()">List</button> 
      </div>
      <div class="gallery-items grid-items">
          [...Gallery Items...]
      </div>
   <?php endwhile; ?>
</div>

Какой будет лучший способ выбора определенных элементов на странице, когда элементы создаются с помощью цикла while, показанного выше.Это постоянно растущий список, и элементы также можно удалять.

В этом примере я создаю страницу, заполненную небольшими галереями, вместе с кнопками переключения для представления «Сетка / список» рядом с каждой галереей.

Я пытаюсь заставить все эти кнопки работать только с галереей, с которой они сгенерированы.

Я знаю, как выбирать их на основе их индекса вручную, но я не знаюкак я мог настроить код, чтобы он мог работать с каждой маленькой галереей в отдельности.

Вот что я придумал, чтобы он работал с первой галереей:

<script>
    const button = document.getElementsByClassName('toggle-button');
    const element = document.getElementsByClassName('gallery-items');

function listView() {
    if ( element[0].classList.contains('grid-items') ){
        element[0].classList.remove("grid-items");
    }

    button[0].classList.toggle('active');
    button[1].classList.toggle('active');
}

function gridView() {
    if ( !element[0].classList.contains('grid-items') ){
        element[0].classList.add("grid-items");
    }

    button[0].classList.toggle('active');
    button[1].classList.toggle('active');
}
</script>

Answer 1

Вместо этого вы можете использовать делегирование событий: добавить прослушиватель кликов для .gallery-container.Если выбранная цель - .toggle-button, запустите соответствующую логику, выбирая соответствующие окружающие элементы при нажатии:

document.querySelector('.gallery-container').addEventListener('click', ({ target }) => {
  if (!target.matches('.toggle-button')) {
    return;
  }
  const toggleContainer = target.parentElement;
  const btns = toggleContainer.children;
  if (target === btns[0]) {
    btns[0].classList.add('active');
    btns[1].classList.remove('active');
  } else {
    btns[0].classList.remove('active');
    btns[1].classList.add('active');
  }
  const galleryItems = toggleContainer.nextElementSibling;
  if (target === btns[0]) {
    galleryItems.classList.add('grid-items');
  } else {
    galleryItems.classList.remove('grid-items');
  }
});

.active {
  background-color: yellow;
}
.grid-items {
  background-color: red;
}

<div class="gallery-container">
  <div class="toggle-container">
    <button class="toggle-button active">Grid</button>
    <button class="toggle-button">List</button>
  </div>
  <div class="gallery-items grid-items">
    [...Gallery Items...]
  </div>
  
    <div class="toggle-container">
    <button class="toggle-button active">Grid</button>
    <button class="toggle-button">List</button>
  </div>
  <div class="gallery-items grid-items">
    [...Gallery Items 2...]
  </div>
</div>

Обратите внимание, что нет необходимости явно проверять, является ли classList.contains конкретный класс перед его добавлением (хотя, делать это не вредно,это просто не нужно).