querySelectorAll 和具有相同类的多个元素

Question

我目前正在尝试调整 this demo 在您单击应用了相同类的链接时进行页面转换。

我不确定如何为使用querySelectorAll 后具有相同类的所有元素调整以下代码。您认为应该进行哪些调整以使其与 querySelectorAll 和具有同一类的多个元素一起使用？

(function() {
  const elmHamburger = document.querySelector('.link-with-overlay');
  const elmOverlay = document.querySelector('.shape-overlays');
  const overlay = new ShapeOverlays(elmOverlay);

  elmHamburger.addEventListener('click', () => {
    if (overlay.isAnimating) {
      return false;
    }
    overlay.toggle();
    if (overlay.isOpened === true) {
      elmHamburger.classList.add('is-opened-navi');

    } else {
      elmHamburger.classList.remove('is-opened-navi');

    }

谢谢！

Answer 1

要让所有链接都具有 onclick 事件，您需要遍历 querySelectorAll 方法返回的 NodeList。

注意：您不能在 IE11 中执行 NodeList.forEach，因此您需要在迭代之前对其进行 polyfill 或将其转换为真正的 JS 数组。

(function() {
  const elmHamburgers = document.querySelectorAll('.link-with-overlay');
  const elmOverlay = document.querySelector('.shape-overlays');
  const overlay = new ShapeOverlays(elmOverlay);

  const onHamburgerClick = function() {
    if (overlay.isAnimating) {
      return false;
    }
    overlay.toggle();
    if (overlay.isOpened === true) {
      this.classList.add('is-opened-navi');

    } else {
      this.classList.remove('is-opened-navi');
    }
  };

  // Iterates over all of the elements matched with class .link-with-overlay and 
  // adds an onclick event listener

  elmHamburgers.forEach(elem => elem.addEventListener('click', onHamburgerClick));

})();

您也可以替换条件：if (overlay.isOpened === true) {... 使用this.classList

this.classList.toggle('is-opened-navi', overlay.isOpened)