Warum funktioniert der ID-Selektor von jQuery nur mit dem ersten Element, wenn mehrere Elemente dieselbe ID haben?

Verhalten des jQuery-ID-Selektors mit mehreren identischen IDs

Bei der Arbeit mit jQuery kann es zu einem Problem kommen, bei dem der ID-Selektor ($(" #xyz")) scheint nur den Wert vom ersten passenden Element abzurufen. Dieses Verhalten kann verwirrend und frustrierend sein, insbesondere wenn Sie erwarten, dass es für alle Elemente mit derselben ID funktioniert.

Der HTML-Code mit identischen IDs

Bedenken Sie Folgendes HTML-Code, der drei Schaltflächen fälschlicherweise dieselbe ID („xyz“) zuweist:

<button>

Die jQuery Code

Sie können den folgenden jQuery-Code ausprobieren, um den Wert der angeklickten Schaltfläche abzurufen:

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

Warum es nur für die erste Schaltfläche funktioniert

In diesem Fall funktioniert der jQuery-Code nur für die erste Schaltfläche. Der jQuery-ID-Selektor dient dazu, das erste Element auszuwählen, das mit der angegebenen ID übereinstimmt. Da die ID „xyz“ mehrmals wiederholt wird, wird nur die erste zurückgegeben.

HTML-Ungültigkeit und die Lösung

Dieses Verhalten unterstreicht, wie wichtig es ist, gültiges HTML sicherzustellen Code. Gemäß den HTML-Spezifikationen muss jeder ID-Wert innerhalb eines Dokuments eindeutig sein. Mehrere Elemente mit derselben ID sind ungültig und sollten vermieden werden.

Um das Problem zu beheben, ersetzen Sie die ID durch ein 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>

JQuery aktualisiert Code

Um den Wert der angeklickten Schaltfläche mithilfe des aktualisierten HTML-Codes abzurufen, verwenden Sie die Klasse Selektor:

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

Hinweis: In diesem überarbeiteten Code ist es nicht erforderlich, das Schlüsselwort „this“ mit $() zu umschließen, da es sich bereits um ein natives JavaScript-Objekt handelt.

Das obige ist der detaillierte Inhalt vonWarum funktioniert der ID-Selektor von jQuery nur mit dem ersten Element, wenn mehrere Elemente dieselbe ID haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!