Warum funktioniert mein jQuery-ID-Selektor nur beim ersten Element?

jQuery-ID-Selektor wählt nur das erste Element aus: Verständnis des Problems

Obwohl es drei Schaltflächen mit identischen IDs gibt, reagiert der #id-Selektor von jQuery nur auf den ersten Tastenklick. Dieses Verhalten ist auf eine grundlegende HTML-Regel zurückzuführen, die vorschreibt, dass jedes Element innerhalb eines Dokuments eine eindeutige ID haben muss.

Ungültige HTML-Struktur

Der bereitgestellte HTML-Code verstößt gegen diese Regel, indem er dieselbe ID zuweist (" xyz") auf mehrere Schaltflächen. Gemäß der HTML-Spezifikation „weist dieses Attribut einem Element einen Namen zu. Dieser Name muss in einem Dokument eindeutig sein.“

Lösung: In Klassen konvertieren

Um dieses Problem zu beheben, ersetzen Sie das ID-Attribut mit einem Klassenattribut für jede Schaltfläche:

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

Überarbeiteter jQuery-Code

Mit der aktualisierten HTML-Struktur sollte der jQuery-Code sein wie folgt geändert:

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery $(this).val() to get the value of the input.
});

Das Verhalten von jQuery verstehen

Der #id-Selektor von jQuery wählt nur das erste Element mit der angegebenen ID im DOM aus. Dies liegt daran, dass die zugrunde liegende Funktion document.getElementById im Browser dieses Verhalten ausführt.

Fazit

Durch Befolgen dieser Richtlinien können Sie mehrere Elemente mit demselben Funktionszweck in jQuery effektiv verarbeiten und so dies sicherstellen Alle Tasten reagieren wie erwartet auf Klicks.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein jQuery-ID-Selektor nur beim ersten Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!