Question

我很难弄清楚如何遍历DOM元素数组。我有一个包含div元素的img数组。我从一个节点列表开始，但将其转换为数组。我希望能够按下特定的按钮并使某些类的div消失。事件监听器是有用的，因为在单击按钮时，具有指定类的第一个元素消失，而不是具有相同类名的其余div。

相关的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元素，所以我真的不确定自己哪里出错了。

Answer 1

事件监听器是有用的，因为在单击按钮时，具有指定类的第一个元素消失，而不是具有相同类名的其余div。

使用querySelectorAll代替querySelector。

querySelectorAll将返回所有匹配元素节点的列表，而querySelector不会返回第一个匹配元素节点。

供参考：Mozilla documentation

Answer 2

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

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

您也不需要showAll课程。如果元素未隐藏，则可见。

＆＃13;

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');
})

＆＃13;

.hide {
  display: none;
}

＆＃13;

<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>

＆＃13;

如何遍历DOM节点列表/数组

2 个答案: