Warum funktioniert der ID-Selektor von jQuery nicht mit mehreren Elementen mit derselben ID?

jQuery-ID-Auswahl funktioniert nicht für mehrere Elemente

Obwohl dieselbe ID für mehrere Elemente verwendet wird, erkennt die ID-Auswahl von jQuery nur das erste Element mit dieser Ausweis. Dies stellt eine Herausforderung dar, wenn versucht wird, die Werte mehrerer Elemente mit derselben ID bei Klickereignissen abzurufen. Hier ist das vorliegende Problem:

<button>

$("#xyz").click(function() {
  var xyz = $(this).val();
  alert(xyz);
});

Dieses jQuery-Skript erfasst jedoch nur den Wert der ersten Schaltfläche („XYZ1“). Das Klicken auf die anderen Schaltflächen löst keine Reaktion aus.

Der Grund für dieses Verhalten liegt in der Natur der HTML-ID-Attribute. Gemäß den HTML-Spezifikationen müssen ID-Werte innerhalb eines Dokuments eindeutig sein. Das Zuweisen derselben ID zu mehreren Elementen verstößt gegen diese Regel, was dazu führt, dass Browser bei Abfragen nach ID nur das erste übereinstimmende Element zurückgeben.

Lösung: Eindeutige Bezeichner mit Klasse

An Beheben Sie dieses Problem und ersetzen Sie ID-Attribute durch Klassenattribute:

<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>

Verwenden Sie jetzt den Klassenselektor in jQuery:

$(".xyz").click(function() {
  alert(this.value);
});

Dieser Code ruft beim Klicken erfolgreich die Werte aller drei Schaltflächen ab. Anstatt sich auf den unzuverlässigen ID-Selektor zu verlassen, stellen Klassenattribute eindeutige Identifikatoren für mehrere ähnliche Elemente bereit und ermöglichen den Abruf spezifischer Informationen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert der ID-Selektor von jQuery nicht mit mehreren Elementen mit derselben ID?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!