Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Susan Sarandon
Freigeben: 2024-11-06 00:06:02
Original
268 Leute haben es durchsucht

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

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";
}));
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!