Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum wählt querySelector bei Verwendung von querySelectorAll() nur das erste Element aus?

Linda Hamilton
Freigeben: 2024-11-07 08:17:02
Original
518 Leute haben es durchsucht

Why does querySelector only select the first element when using querySelectorAll()?

Warum wählt querySelector nur das erste Element aus und wie kann ich das beheben?

Wenn die Methode querySelectorAll() für einen Selektor verwendet wird Wenn mehrere Elemente ausgewählt werden, wird eine Liste von Knoten zurückgegeben.

Im bereitgestellten Code verwenden Sie querySelectorAll(), um alle Elemente mit der Klasse „weekdays“ auszuwählen. Das Problem besteht darin, dass Sie querySelector() später im Code verwenden, um jedem Element in der Liste einen Ereignis-Listener hinzuzufügen, der nur auf das erste Element in der Liste abzielt.

Um dieses Problem zu beheben, sollten Sie verwenden forEach(), um jedes Element in der Liste zu durchlaufen und den Ereignis-Listener zu jedem Element hinzuzufügen.

Hier ist der aktualisierte Code:

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

Das obige ist der detaillierte Inhalt vonWarum wählt querySelector bei Verwendung von querySelectorAll() nur das erste Element aus?. 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!