querySelectorAll и несколько элементов с одним классом

Question

В настоящее время я пытаюсь адаптировать это демо для переходов страниц, когда вы нажимаете на ссылки с тем же классом, к которому они применяются.

Я не уверен, как адаптировать следующий фрагмент кода для всех элементов того же класса после использования 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, вам нужно выполнить итерацию по NodeList, возвращаемому методом querySelectorAll.

ПРИМЕЧАНИЕ: Вы не можете сделать NodeList.forEach в IE11, поэтому вам нужно будет заполнить или преобразовать его в истинный массив 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)