Maison > interface Web > tutoriel CSS > Pourquoi « querySelector » sélectionne-t-il uniquement le premier élément et comment y remédier ?

Pourquoi « querySelector » sélectionne-t-il uniquement le premier élément et comment y remédier ?

Susan Sarandon
Libérer: 2024-11-06 00:06:02
original
329 Les gens l'ont consulté

Why Does `querySelector` Only Select the First Element and How to Fix It?

Pourquoi querySelector sélectionne uniquement le premier élément et comment y remédier

Lors de l'utilisation de querySelector, il est important de se rappeler qu'il sélectionne uniquement le premier élément élément correspondant dans le document. Si vous avez plusieurs éléments avec la même classe ou le même identifiant, seul le premier sera renvoyé.

Dans votre cas, vous avez plusieurs boutons avec la même classe en semaine représentant des dates sur un calendrier . Lorsque vous cliquez sur l'un d'entre eux, cela ne fonctionne pas car querySelector ne sélectionne que le tout premier.

La solution est d'utiliser querySelectorAll à la place, qui renvoie une liste de nœuds de tous éléments correspondants. Vous pouvez ensuite parcourir la liste et attacher des écouteurs d'événement à chacun.

Voici le code corrigé :

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

Cela attachera un écouteur d'événement à chaque élément avec la classe en semaine, garantissant que n'importe quelle date peut ouvrir le formulaire en cliquant dessus.

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!

source:php.cn
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