Gestion dynamique HTML partie 1

by Jonathan Martel

HTML

<main class="catalogue">
  <article class="carte">
    <h2>Titre</h2>
    <h3>Sous-titre</h3>
    <section class="action">
      <a href="#">Action 1</a>
      <a href="#">Action 2</a>
    </section>
  </article>
  <article class="carte">
    <h2>Titre</h2>
    <h3>Sous-titre</h3>
    <section class="action">
      <a href="#">Action 1</a>
      <a href="#">Action 2</a>
    </section>
  </article>
  <article class="carte">
    <h2>Titre</h2>
    <h3>Sous-titre</h3>
    <section class="action">
      <a href="#">Action 1</a>
      <a href="#">Action 2</a>
    </section>
  </article>
  <article class="carte">
    <h2>Titre</h2>
    <h3>Sous-titre</h3>
    <section class="action">
      <a href="#">Action 1</a>
      <a href="#">Action 2</a>
    </section>
  </article>
</main>

CSS

.carte {
  border: 1px solid #000;
}

.enter {
  background-color: #CCCCCC;
}

.action0 {
  background-color: #ff0000;
}

.action1 {
  background-color: #ff00FF;
}

JavaScript

(function() {
  "use strict";
  var lesCartes = document.querySelectorAll(".carte"); // Sélecteur de carte
  for (var i = 0; i < lesCartes.length; i++) { // Pour toutes les cartes trouvées
    lesCartes[i].addEventListener("mouseenter", function(evt) { // Attache la fonction anonyme et recueille le paramètre de type MouseEvent
      evt.target.classList.add("enter"); // Manipulation des classes avec l'api ClassList
    });
    lesCartes[i].addEventListener("mouseleave", function(evt) {
      evt.target.classList.remove("enter");
    });

    // Récupère les boutons d'une carte. Le querySelectorAll() cherche à partir du parent. Il retournera donc
    // seulement les 2 boutons de chaque carte.
    var btnActions = lesCartes[i].querySelectorAll(".action > a");
    console.log(btnActions);
    for (var j = 0; j < btnActions.length; j++) {
      btnActions[j].addEventListener("click", (function(valeur_j) {
        return function(evt) {
          evt.target.classList.toggle("action" + valeur_j);
        }
      })(j));
    }
  }

})();