Warum wählt jQuery nur das erste Element mit einer doppelten ID aus?

Ungültiges HTML: Mehrere Elemente mit derselben ID

Problembeschreibung:

In der Bei gegebener HTML-Struktur gibt es drei Schaltflächen mit derselben ID, „xyz“. Wenn Sie jedoch den jQuery-ID-Selektor $("#xyz") zur Verarbeitung von onClick-Ereignissen verwenden, reagiert nur die erste Schaltfläche. Die anderen Schaltflächen werden ignoriert.

Analyse:

Der jQuery-ID-Selektor dient dazu, das erste Element mit einer passenden ID im Dokument auszuwählen. Gemäß den W3C-Spezifikationen sollte ein ID-Wert jedoch innerhalb des Dokuments eindeutig sein. Mehrere Elemente mit derselben ID gelten als ungültiges HTML.

Wie in der jQuery-API-Dokumentation erwähnt, wählt der jQuery-Selektor nur das erste passende Element aus, wenn mehr als ein Element dieselbe ID hat. Es wird nicht empfohlen, sich auf dieses Verhalten zu verlassen, und der HTML-Code sollte korrigiert werden, um die Eindeutigkeit der IDs sicherzustellen.

Lösung:

Um dieses Problem zu beheben, ersetzen Sie das id-Attribut durch ein Klassenattribut für die Schaltflächen. Dadurch können die Schaltflächen unterschiedliche Werte haben, ohne die HTML-Validierungsregeln zu verletzen.

Überarbeitetes HTML:

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

Aktualisiertes jQuery-Skript:

Um die Klickereignisse für alle Schaltflächen mit der xyz-Klasse zu verarbeiten, verwenden Sie die folgende jQuery Code:

$(".xyz").click(function(){
    // Get the value of the button that was clicked
    var xyz = this.value;

    // Display the value in an alert box
    alert(xyz);
});

Dieser aktualisierte Code verarbeitet die onClick-Ereignisse für alle drei Schaltflächen ordnungsgemäß und zeigt ihre jeweiligen Werte in Warnfeldern an.

Das obige ist der detaillierte Inhalt vonWarum wählt jQuery nur das erste Element mit einer doppelten ID aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!