Конвертировать код из jquery в native js

Question

Ниже приведен код для изменения классов элементов по нажатию на ссылку a с классом .catalog-item__back. Естественно этих ссылок много как и элементов с классами .catalog-item__content и .catalog-item__list и я не знаю как это переписать на native js.

$(".catalog-item__back").each(function (i) {
  $(this).on("click", function (e) {
    e.preventDefault();
    $(".catalog-item__content")
      .eq(i)
      .toggleClass("catalog-item__content_active");
    $(".catalog-item__list").eq(i).toggleClass("catalog-item__list_active");
  });
});

Вот пытался перенести на джс:

document.querySelector(".catalog-item__back").each(function (i) {
    document.querySelector(this).addEventListener("click", function (e) {
      e.preventDefault();
      document
        .querySelector(".catalog-item__content")
        .eq(i)
        .classList.toggle("catalog-item__content_active");
      document
        .querySelector(".catalog-item__list")
        .eq(i)
        .classList.toggle("catalog-item__list_active");
    });
  });

Как это запихнуть в событие клика на элемент, чтобы оно сработало?

Answer 1

По JQ коду, аналог на JS должен быть такой:

document.querySelectorAll('.catalog-item__back').forEach(function(elem, i) {
  elem.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelectorAll('.catalog-item__content')[i].classList.toggle('catalog-item__content_active');
    document.querySelectorAll('.catalog-item__list')[i].classList.toggle('catalog-item__list_active');
  });
});

Но что-то закрадываются смутные сомнения

БЛОГ НА HUSL

Конвертировать код из jquery в native js

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