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是否为特定类（尽管这样做没有害处，只是不必要）。

如何使用动态创建的JS选择特定元素？

1 个答案: