Pourquoi « querySelector » sélectionne-t-il uniquement le premier élément et comment puis-je résoudre ce problème ?

Pourquoi querySelector sélectionne-t-il uniquement le premier élément et comment puis-je résoudre ce problème ?

Comprendre querySelector

En JavaScript, la méthode querySelector sélectionne le premier élément correspondant dans le document en fonction de la chaîne de sélection fournie. Si plusieurs éléments correspondent au sélecteur, seul le premier est renvoyé.

Description du problème

Dans votre CodePen fourni, vous utilisez querySelector pour sélectionner les éléments avec la classe en semaine. Cependant, vous observez que seul le premier élément correspondant déclenche l'événement de clic, alors que tous les autres ne le font pas.

Solution : Utilisation de querySelectorAll pour plusieurs éléments

Pour résoudre ce problème, vous devez utiliser querySelectorAll à la place, qui renvoie une NodeList contenant tous les éléments correspondants. Ensuite, vous pouvez parcourir la NodeList et attacher le gestionnaire d'événements à chaque élément.

Code révisé :

document.querySelectorAll(".weekdays").forEach(elem => {
  elem.addEventListener("click", () => {
    document.querySelector(".bg-modal").style.display = "flex";
  });
});

Explication :

• document.querySelectorAll( ".weekdays") : sélectionne tous les éléments avec la classe weekdays et les renvoie sous forme de NodeList.
• forEach : itère sur chaque élément de la NodeList.
• elem.addEventListener("click", ...) : attache un écouteur d'événement de clic à chaque élément de la semaine, ce qui déclenche le même code qu'avant pour afficher le formulaire modal.

Maintenant, lorsque vous cliquez sur un élément des jours de la semaine, le modal sera apparaît correctement, corrigeant le problème que vous rencontriez avec querySelector en sélectionnant uniquement le premier élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!