Warum wählt „querySelector“ nur das erste Element aus und wie lässt sich das beheben?

Warum querySelector nur das erste Element auswählt und wie man es behebt

Bei der Verwendung von querySelector ist es wichtig zu bedenken, dass nur das erste Element ausgewählt wird passendes Element im Dokument. Wenn Sie mehrere Elemente mit derselben Klasse oder ID haben, wird nur das erste zurückgegeben.

In Ihrem Fall haben Sie mehrere Schaltflächen mit denselben Wochentagen der Klasse, die Daten in einem Kalender darstellen . Wenn Sie auf einen davon klicken, funktioniert es nicht, da querySelector nur den allerersten auswählt.

Die Lösung besteht darin, stattdessen querySelectorAll zu verwenden, der eine Knotenliste aller Knoten zurückgibt passende Elemente. Anschließend können Sie die Liste durchlaufen und jedem Element einen Ereignis-Listener hinzufügen.

Hier ist der korrigierte Code:

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

Dadurch wird jedem Element mit den Wochentagen der Klasse ein Ereignis-Listener hinzugefügt, um sicherzustellen dass jedes Datum das Formular öffnen kann, wenn darauf geklickt wird.

Das obige ist der detaillierte Inhalt vonWarum wählt „querySelector“ nur das erste Element aus und wie lässt sich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!