Pourquoi « querySelector » sélectionne-t-il uniquement le premier élément de la classe « .weekdays » ?

querySelector sélectionne uniquement le premier élément

Dans votre code, vous utilisez querySelector pour récupérer les éléments de la classe .weekdays. Cependant, cette méthode sélectionne uniquement le premier élément correspondant au sélecteur spécifié. Comme vous avez plusieurs dates avec la même classe, seule la première date "1" est capturée.

Comment y remédier : utilisez querySelectorAll

Pour sélectionner toutes les dates dans la classe .weekdays, vous devez utiliser querySelectorAll. Cette méthode renvoie une NodeList contenant tous les éléments qui correspondent au sélecteur donné. Voici comment corriger votre code :

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

Explication :

Ce code :

1. Appelle querySelectorAll pour sélectionner tous les éléments avec le .weekdays et les stocke dans une NodeList.
2. Itère sur chaque élément dans la NodeList à l'aide de forEach.
3. Pour chaque élément, ajoute un écouteur d'événement de clic qui affiche le modal lorsque vous cliquez dessus.

En utilisant querySelectorAll, vous sélectionnez toutes les dates dans le .weekdays et en attachant l'écouteur d'événement à chacun d'eux, en garantissant que n'importe quelle date peut déclencher l'affichage modal.

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!