Warum wählt „querySelector' nur das erste Element in der Klasse „.weekdays' aus?

querySelector wählt nur das erste Element aus

In Ihrem Code verwenden Sie querySelector, um die Elemente innerhalb der .weekdays-Klasse abzurufen. Diese Methode wählt jedoch nur das erste Element aus, das dem angegebenen Selektor entspricht. Da Sie mehrere Daten mit derselben Klasse haben, wird nur das erste „1“-Datum erfasst.

So beheben Sie das Problem: Verwenden Sie querySelectorAll

Um alle Daten auszuwählen Innerhalb der .weekdays-Klasse müssen Sie querySelectorAll verwenden. Diese Methode gibt eine NodeList zurück, die alle Elemente enthält, die mit dem angegebenen Selektor übereinstimmen. So korrigieren Sie Ihren Code:

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

Erklärung:

Dieser Code:

1. Ruft querySelectorAll auf, um alle Elemente mit auszuwählen .weekdays-Klasse und speichert sie in einer NodeList.
2. Iteriert über jedes Element in die NodeList mit forEach.
3. Fügt für jedes Element einen Klickereignis-Listener hinzu, der beim Klicken das Modal anzeigt.

Durch die Verwendung von querySelectorAll wählen Sie alle Daten innerhalb der aus. Wochentagsklasse und Anhängen des Ereignis-Listeners an jeden von ihnen, um sicherzustellen, dass jedes Datum die modale Anzeige auslösen kann.

Das obige ist der detaillierte Inhalt vonWarum wählt „querySelector' nur das erste Element in der Klasse „.weekdays' aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!