Gestion dynamique HTML partie 1

by Jonathan Martel

HTML

<main class="catalogue">
  
</main>

CSS

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

.enter {
  background-color: #CCCCCC;
}

.action0 {
  background-color: #ff0000;
}

.action1 {
  background-color: #ff00FF;
}

JavaScript

var donnees = [];
for(var k=0; k<5; k++)
{
    donnees.push({
        titre:"Allo le monde "+k,
        soustitre : "Sous-titre de allo le monde "+k,
        description : "Lorem ipsum...."+k
    });
}

(function() {
  "use strict";
  var catalogue = document.querySelector(".catalogue");
  for(var k=0; k<donnees.length;k++){
  	catalogue.innerHTML +='<article class="carte produit">'+
                                    '<h2>'+donnees[k].titre+'</h2>'+
                                    '<h3>'+donnees[k].soustitre+'</h3>'+
                                    '<section class="action">'+
                                        '<a href="#">Action 1</a>'+
                                        '<a href="#">Action 2</a>'+
                                    '</section>'+
                                '</article>';
  }
  
  
  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));
    }
  }
})();