代码之家 › 专栏 › 技术社区 › jtc10

如何迭代DOM节点列表/数组

dom html javascript

jtc10 · 技术社区 · 6 年前

我很难理解如何遍历DOM元素数组。我有一系列 div 包含 img 元素。我从节点列表开始,但将其转换为数组。我希望能够按特定的按钮 部门 具有特定类的s消失。事件监听器是功能性的,因为单击按钮时,具有指定类的第一个元素将消失,而不是 部门 具有相同的类名。

相关HTML

<!-- list items for the project gallery -->
      <ul class="gallery-list">
        <li class="gallery-list-item all-button">All</li>
        <li class="gallery-list-item indoor-button">Indoor</li>
        <li class="gallery-list-item outdoor-button">Outdoor</li>
      </ul>
      <!-- flex container for gallery pictures -->
      <div class="gallery-flex-container">
        <!-- flex items / content images -->
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-1.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-1.jpg" alt="outdoor garden picture">
        </div>
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-2.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-2.jpg" alt="outdoor garden picture">
        </div>
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-3.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-3.jpg" alt="outdoor garden picture">
        </div>
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-4.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-4.jpg" alt="outdoor garden picture">
        </div>
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-5.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-5.jpg" alt="outdoor garden picture">
        </div>
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-6.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-6.jpg" alt="outdoor garden picture">
        </div>
      </div>

相关Javascript

// Script for gallery page picture toggle

let imgArray = [...document.querySelectorAll('.gallery-flex-item')];

console.log(imgArray);

var listItem = document.querySelector('.gallery-list');
var indoor = document.querySelector('.indoor');
var outdoor = document.querySelector('.outdoor');

listItem.addEventListener('click', function (e) {
  for (var i = 0; i < imgArray.length; i++) {
    if (e.target.classList.contains('all-button')) {
      indoor.classList.remove('hide-indoor');
      outdoor.classList.remove('hide-outdoor');

    } else if (e.target.classList.contains('indoor-button')) {

// Here is the section of code I tried incorporating the 'i' variable
// and it works the exact same as the other two 'if' statements.
// Only manipulating the first of elements with selected classes.

      if (imgArray[i].classList.contains('indoor')) {  
        indoor.classList.remove('hide-indoor');
      } else if (imgArray[i].classList.contains('outdoor')) {
        outdoor.classList.add('hide-outdoor');
      }

    } else if (e.target.classList.contains('outdoor-button')) {
      outdoor.classList.remove('hide-outdoor');
      indoor.classList.add('hide-indoor');
    }

  }
});

这是我第一次尝试迭代DOM元素,所以我真的不知道我哪里出错了。

2 回复 | 直到 6 年前

xuhaib 6 年前

事件侦听器可以正常工作,因为单击按钮后,具有指定类的第一个元素将消失,而不是具有相同类名的其余div。

使用 querySelectorAll 代替 querySelector 。

查询选择器all 将返回所有匹配元素节点的列表 查询选择器 它只返回第一个匹配的元素节点。

供参考: Mozilla documentation

Tomasz Kula 6 年前

我简化了你的代码。这应该让你开始。

您不需要 hide-outdoor 和 hide-indoor 执行相同操作的css类。您可以使用共享 hide 类并将其应用于不同的元素。

您也不需要 showAll 班如果元素未隐藏,它将可见。

const getEl = (selector) => document.querySelector(selector);
const getAllEls = (selector) => [...document.querySelectorAll(selector)];
const hideEl = (el) => el.classList.add('hide');
const showEl = (el) => el.classList.remove('hide');
const hideEls = (selector) => getAllEls(selector).forEach(hideEl);
const showEls = (selector) => getAllEls(selector).forEach(showEl);

const select = getEl('[data-all]');
const indoor = getEl('[data-indoor]');
const outdoor = getEl('[data-outdoor]');
const indoorEls = getAllEls('.indoor');
const outdoorEls = getAllEls('.outdoor');

select.addEventListener('click', () => {
  showEls('.indoor');
  showEls('.outdoor');
})

indoor.addEventListener('click', () => {
  showEls('.indoor');
  hideEls('.outdoor');
})

outdoor.addEventListener('click', () => {
  showEls('.outdoor');
  hideEls('.indoor');
})

.hide {
  display: none;
}

<ul class="menu">
  <li data-all>All</li>
  <li data-indoor>Indoor</li>
  <li data-outdoor="">Outdoor</li>
</ul>
<div class="gallery">
  <div class="gallery-item  indoor">
    <img src="https://via.placeholder.com/50x50" alt="indoor garden picture">
  </div>
  <div class="gallery-item  outdoor">
    <img src="https://via.placeholder.com/150x150" alt="outdoor garden picture">
  </div>
</div>