Как переписать данный код JS на JQuery?

Question

for (let i = 0; i < menuLinks.length; i++) {
    mobileLink[i].addEventListener('click', event => {
      mobile.classList.add('hide');
      body.classList.remove('hidden');
      burgerMenu.classList.remove('menu-burger--active');
      sections.forEach(section => {
        section.classList.add('hide');
      });
      if (sections[i].classList.contains('hide')) {
        sections[i].classList.remove('hide');
      }
    });
    menuLinks[i].addEventListener('click', event => {
      sections.forEach(section => {
        section.classList.add('hide');
      });
      if (sections[i].classList.contains('hide')) {
        sections[i].classList.remove('hide');
      }
    });
  }

Если вместо document.querySelectorAll брать через $('.class');, то при переборе массива в цикле кидает ошибку.

Answer 1

querySelectorAll возвращает не массив: Это коллекция nodeList, у которого в современных браузерах есть встроенный метод forEach

$('.class') дает специальный jQuery-объект со встроенными методами, среди которых тоже нет forEach. В jQuery .each()

Перевод:

let $mobileLinks = $(".mobileLink"); // замените на названия своих классов.
let $menuLinks = $(".menuLink");
let $sections = $(".section");

let $body = $("body");
let $mobile = $(".mobile").eq(0);
let $burgerMenu = $(".burgerMenu").eq(0);
// собирает все элементы, берет первый, а-ля querySelector (хотя он
  // изначально берет только первый элемент и останавливается)

$menuLinks.each(function(i) {

  $menuLinks.eq(i).on("click", function() {
    $sections.addClass('hide');    // Убирает 'hide' у всех,
    $sections.eq(i).removeClass("hide"); // Добавляет `i`-тому элементу.
  });

  $mobileLinks.eq(i).on("click", function() {
    $mobile.addClass("hide");
    $body.removeClass("hidden");
    $burgerMenu.removeClass("menu-burger--active");
    
    $sections.addClass("hide");
    $sections.eq(i).removeClass("hide");
  });

});

Внутри each, $menuLinks.eq(i) можно заменить на $(this). Но первый вариант симметричнее)

БЛОГ НА HUSL

Как переписать данный код JS на JQuery?

Ответы (1 шт):