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

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

QuerySelector verstehen

In JavaScript wählt die Methode querySelector das erste aus passendes Element im Dokument basierend auf der bereitgestellten Selektorzeichenfolge. Wenn mehrere Elemente mit dem Selektor übereinstimmen, wird nur das erste zurückgegeben.

Problembeschreibung

In Ihrem bereitgestellten CodePen verwenden Sie querySelector, um die Elemente mit den Wochentagen der Klasse auszuwählen. Sie stellen jedoch fest, dass nur das erste übereinstimmende Element das Klickereignis auslöst, während alle anderen dies nicht tun.

Lösung: querySelectorAll für mehrere Elemente verwenden

Um dieses Problem zu beheben, sollten Sie querySelectorAll verwenden Stattdessen wird eine Methode verwendet, die eine NodeList zurückgibt, die alle übereinstimmenden Elemente enthält. Anschließend können Sie die NodeList durchlaufen und den Ereignishandler an jedes Element anhängen.

Überarbeiteter Code:

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

Erklärung:

• document.querySelectorAll( „.weekdays“): Wählt alle Elemente mit der Klasse Wochentage aus und gibt sie als zurück NodeList.
• forEach: Iteriert über jedes Element in der NodeList.
• elem.addEventListener("click", ...): Fügt jedem Wochentagselement einen Click-Event-Listener hinzu, der das auslöst Gleicher Code wie zuvor, um das Formularmodal anzuzeigen.

Wenn Sie jetzt auf ein beliebiges Wochentagselement klicken, wird das Modal angezeigt ordnungsgemäß angezeigt und behebt das Problem, das bei der Auswahl des ersten Elements durch querySelector aufgetreten ist.

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