Question

我曾经在项目中使用jQuery，但我只想使用纯JS来做到这一点，我尝试过：

//Open overlay
document.querySelector('.gallery__img').addEventListener('click', function () {
  document.querySelector('.overlay').classList.add('showOverlay');
});

// Close overlay
document.querySelector('#closeOverlay').addEventListener('click', function() {
  document.querySelector('.overlay').classList.remove('showOverlay');
});

但是它没有用，我天真地认为它会像使用jQuery一样简单...仅使用上面的代码，当我单击第一个元素时，添加了类，但是它不适用于其余的。

HTMl看起来像这样：

<div class="gallery">
  <img src="img/hg-1.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-2.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-3.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-4.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-5.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-6.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-7.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-8.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-9.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-10.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-11.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-12.jpg" alt="Interior view" class="gallery__img">
</div>

Answer 1

document.querySelector('.gallery__img')将返回它在HTML中找到的第一个img标签。

如果要将事件侦听器绑定到所有img，则需要使用document.querySelectorAll，并且需要遍历集合以绑定侦听器。

document.querySelectorAll('.gallery__img').forEach(img => {
  img.addEventListener('click', function() { ... });
})

Answer 2

您需要将事件侦听器添加到所有元素（带有.querySelectorAll和forEach或其他循环）。在querySelector返回的元素上添加事件监听器只会将监听器添加到该元素（匹配的第一个元素），而不是在所有与选择器匹配的元素上添加监听器。

或者，您可以改用事件委托-在.gallery上仅添加一个侦听器，检查目标是否匹配.gallery__img，如果匹配，则切换classList每个孩子的数量：

const gallery = document.querySelector('.gallery');
gallery.onclick = (e) => {
  if (!e.target.matches('.gallery__img')) return;
  [...gallery.children].forEach(child => child.classList.add('showOverlay'));
}

.showOverlay {
  display: none;
}

<div class="gallery">
  <img src="img/hg-1.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-2.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-3.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-4.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-5.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-6.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-7.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-8.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-9.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-10.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-11.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-12.jpg" alt="Interior view" class="gallery__img">
</div>

将类添加到具有相同类的多个元素

2 个答案: