Как сократить это заявление - PullRequest
Новая
       12

Как сократить это заявление

0 голосов
/ 19 апреля 2020

Как сократить этот код и какой метод массива я могу использовать здесь. Я хочу добавить класс при каждом нажатии на отдельный элемент, а остальные элементы удалить класс. 

 const activeLink = document.querySelectorAll(".nav-item");
 activeLink[0].addEventListener("click", () => {
  activeLink[0].classList.add("active");

  activeLink[1].classList.remove("active");
  activeLink[2].classList.remove("active");
  activeLink[3].classList.remove("active");
});

activeLink[1].addEventListener("click", () => {
  activeLink[1].classList.add("active");

  activeLink[0].classList.remove("active");
  activeLink[2].classList.remove("active");
  activeLink[3].classList.remove("active");
});

activeLink[2].addEventListener("click", () => {
  activeLink[2].classList.add("active");

  activeLink[0].classList.remove("active");
  activeLink[1].classList.remove("active");
  activeLink[3].classList.remove("active");
});

activeLink[3].addEventListener("click", () => {
  activeLink[3].classList.add("active");

  activeLink[0].classList.remove("active");
  activeLink[1].classList.remove("active");
  activeLink[2].classList.remove("active");
});

1 Ответ

1 голос
/ 19 апреля 2020

Вместо того, чтобы перебирать все элементы за клик, вы можете просто отслеживать, какой элемент активен в данный момент, и сбросить этот элемент.

https://codesandbox.io/s/compassionate-northcutt-50ucp?file= / src / index. js

let activeLink = null;

document.querySelectorAll(".nav-item").forEach(navItem => {
  navItem.addEventListener("click", () => {
    if (activeLink) {
      activeLink.classList.remove("active");
    }
    navItem.classList.add("active");
    activeLink = navItem;
  });
});
...