Ajouter une classe à un et un seul élément d'une liste HTML lors d'un clic

Question

J'ai une liste comme suit :

   Item 1
   Item 2
   Item 3

Et j'ai besoin d'ajouter la classe active à chaque élément individuellement et de la supprimer sur l'élément précédent lors du clic.

Quelque chose de similaire à cette question Vanilla JS remove class from previous selection cependant j'ai besoin d'utiliser une boucle For au lieu de ForEach en raison de la compatibilité du vieux navigateur.

J'ai essayé d'adapter cette réponse à mon exemple :

const items = document.querySelectorAll(".item");

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  item.addEventListener("click", addActiveClass);

  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    item.addEventListener("click", removeClass);
  }
}

function removeClass(e) {
  e.target.classList.remove("active");
}

function addActiveClass(e) {
  e.target.classList.add("active");
}

Mais ça ne fonctionne toujours pas comme prévu :(

Answer 1

Cela ajoutera / supprimera des classes selon les besoins. De plus, il est toujours bon de vérifier et de s'assurer que l'élément que vous recherchez .item est effectivement sur la page.

const items = document.querySelectorAll(".item");

for (let i = 0; i < items.length; i++) {
  const item = items[i];

  item.addEventListener("click", () => {
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      item.classList.remove("active");
    }

    item.classList.add("active");
  });
}

.item:hover {
  cursor: pointer;
}
.active {
  color: blue;
}

     Article 1
     Article 2
     Article 3

Answer 2

Il vous suffit de le faire dans un gestionnaire d'événements click.

const items = document.querySelectorAll(".item");

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  item.addEventListener("click", (e) => toggleActiveClass(e, items));
}

function toggleActiveClass(e) {
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    item.classList.remove("active");
  }
  e.target.classList.add("active");
}

.item.active {
  color: red;
}

   Item 1
   Item 2
   Item 3