Mehrere Markups mit der gleichen ID in html/js

Question

Ich habe eine Tabelle, die mehrere Zeilen hat und die erste Spalte jeder Zeile enthält eine Schaltfläche. Diese Schaltfläche in jeder Zeile muss eine gemeinsame Operation basierend auf den Daten in anderen Spalten dieser Zeile ausführen.

Ist es ratsam, allen Tasten eine gemeinsame "ID" zuzuweisen, da diese beim Klicken dieselbe Funktion aufrufen, nur mit anderen Parametern. ODER Anstelle von "ID" sollte ich eine benutzerdefinierte Klasse zuweisen diese Tasten und dann für alle Markups mit der benutzerdefinierten Klasse, könnte ich das onclick Verhalten definieren?

Welcher Ansatz ist die besser akzeptierte Praxis?

Answer 1

Um eine gemeinsame Aktion zuzuweisen, würde ich jeder Schaltfläche eine bestimmte Klasse zuweisen und ihre IDs eindeutig behalten. Wenn ich nicht falsch liege, glaube ich, dass es eine schlechte Übung ist, dieselbe ID zweimal zu verwenden, da sie dazu dienen sollen, ein Element eindeutig zu identifizieren. Wenn Sie jeder Schaltfläche die gleiche Klasse zuweisen, können Sie jQuery einfach verwenden, um beispielsweise alle diese Schaltflächen zu finden und ihnen einen Handler zuzuweisen.

Answer 2

Verwenden Sie eine Klasse wie diese.

<button class="someCommonClassName"></button> 

Answer 3

Sie sollten für die Klasse gehen oder können Sie Name Eigenschaft

<button name="common name" onclick="CommonFunction();"></button 

Answer 4

Es ist definitiv nicht verwenden die gleiche ID für Elemente wie JavaScript zu verwenden, beraten wird das erste Element zurück. Beispiel

<p id="same-id">Shirts</p> 
<p id="same-id">Pants</p> 

Die Auswahl mit JavaScript wird den Absatz mit Shirts Ziel nur

Sie jedoch Klassen oder Daten-Attribute für mehr semantisches Markup wie so verwenden können:

über Klassen

<p class="same-class">Shirts</p> 
<p class="same-class">Pants</p> 

Mit Datenattribute

<p data-attribute_name="some_value">Shirts</p> 
<p data-attribute_name="some_value">Pants</p> 

dann mit jQuery Sie $('[data-attribute_name]="value"'); OR mit JavaScript verwenden, können Sie eine ähnliche Methode von this Frage