Maison > interface Web > tutoriel CSS > 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 ?

Barbara Streisand
Libérer: 2024-12-05 03:52:12
original
1049 Les gens l'ont consulté

Why is `querySelector` Selecting Only the First Element and How Can I Fix This?

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";
  });
});
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal