Ist es jemals akzeptabel, mehrere IDs in einer HTML-Seite zu haben?

Question

Es gibt einige Fragen zu Stack Overflow über id vs class aber diese Fragen sind fast immer in Bezug auf CSS - und die allgemein akzeptierte Antwort ist die Verwendung von Klassen, um eine bestimmte Reihe von Elementen und IDs für bestimmte Instanzen zu stylen. Macht Sinn, fair genug.

Ich finde jedoch, dass, wie ich mehr und mehr Javascript/jQuery/Ajax, dieser Ansatz wird immer weniger klar geschnitten und ich finde Situationen, wo semantische Elemente IDs gegeben werden sollte, aber weil es sein könnte mehrere Instanzen Ich sollte Klassen verwenden.

Hier ist ein Beispiel dafür, was ich meine:

Werfen Sie einen Blick auf die Symbolleiste auf Stack-Überlauf des Abschlags Frage Editor - jede Taste hat eine ID es eindeutig zu identifizieren. Macht Sinn - es ist ein Knopf, der eine bestimmte Funktion ausführt und es ist wahrscheinlich ein Skript angehängt, das auf dieser ID basiert.

Jetzt stellen Sie sich vor, dass ich eine Rich-Web-App erstelle und es gibt eine Seite, die zwei Registerkarten mit jeweils einem Markdown-Editor hat. Bedeutet dies, dass die Symbolleistenschaltflächen nun Klassen bis identifizieren sollten? sie?

Das scheint einfach falsch.

Ein anderes Beispiel: Ich arbeite an einer Fotogalerie-Website, die auf jedem Foto eine kleine Symbolleiste überlagert hat. Die Konvention besagt, dass ich mehrere Klassen verwenden sollte, da es mehrere Instanzen dieser Schaltflächen gibt. "Ja wirklich?"

Also meine Fragen sind ....

• Wenn ich das Verbrechen der doppelten IDs auf einer Seite zu begehen, welchen Browser tatsächlich brechen?
• Bei Browsern, bei denen dies nicht funktioniert, wird nur das CSS-Design unterbrochen oder jQuery-Selektoren werden ebenfalls unterbrochen.
• Ist es wirklich so schlimm, doppelte IDs in Fällen wie den beschriebenen zu verwenden.

Answer 1

Klassen bedeuten a ... (unbestimmt) IDs bedeuten das ist ... (endgültige)

„Dieses div ist ein Photo- Symbolleiste. Es kann mehr wie es sein. " Macht Sinn, ich würde eine Klasse benutzen.

Ich würde nicht unbedingt ID Symbolleistenschaltflächen, es sei denn, ich war sicher, dass es nur eine Instanz dieser Symbolleiste auf der Seite sein kann. Im Falle des Markdown-Editors von StackOverflow denke ich auch, dass dies Klassen für mehr Flexibilität sein sollten (der gesamte Editor kann stattdessen in eine eindeutige ID eingebettet werden, wie # Antwort-Editor oder # Kommentar-Editor).

Browser sind ziemlich flexibel in dem, was sie akzeptieren, aber das bedeutet nicht, dass die Standards gebrochen werden sollten.

Answer 2

• Wenn ich das Verbrechen der doppelten IDs auf einer Seite zu begehen, welchen Browser tatsächlich brechen? HTML-Prüfer beschweren sich, weil ID-Attribute eindeutig sein sollten, , aber die großen drei Browser-Engines lassen mich damit durchkommen.

• Für Browser, in denen dies zu brechen, ist es nur das CSS-Styling, das wird brechen, oder werden auch jQuery Selektoren brechen. jquery Selektor nicht oder nicht wie erwartet funktionieren. wie es definiert, um einzigartig zu wählen

• Ist es wirklich so schlimm, doppelte IDs in Fällen wie den beschriebenen zu verwenden. von jedem Standard, versucht, seine nicht gute Praxis so vermeiden, wie viel können Sie viel Sinn Browser machen, jquery ....

Answer 3

Wenn Sie zwei Tasten haben, sollten Sie zwei unterschiedliche IDs haben, sie zu identifizieren .Sie können Klassen verwenden sie, um Stil, aber es gibt nichts, was man von der Verwendung einer Javascript-Funktion für zwei Tasten zu verhindern:

$("#idOne").click(function(){ 
    myClickHandler(this); 
}); 

$("#idTwo").click(function(){ 
    myClickHandler(this); 
}); 

var myClickHandler = function(element){ 
    // element is the DOM Element of the Button that was clicked 
    // Turn it into a jQuery Object: $(element) 
}; 

Natürlich Ihre Schaltfläche in der Regel mit einem TextArea- einiger Sorten in Wechselwirkung tritt und die beiden Textfelder sollten verschiedene IDs Denn dann können Sie nur dies tun:

$("#idOne").click(function(){ 
    myClickHandler(this,"idOfTextArea1"); 
}); 

$("#idTwo").click(function(){ 
    myClickHandler(this,"idOfTextArea2"); 
}); 

var myClickHandler = function(element, textAreaId){ 
    var ta = $("#"+textAreaId); 
    // Do something with the textarea 
} 

Answer 4

Tun Sie es nicht.

Es ist nicht das Browser wird brechen, es ist Skripte, die brechen wird. jQuery, irgendetwas mit .getElementById, etc.

Irgendwann muss jemand anderes an der App arbeiten, und ich erwarte, dass sie durch die doppelten IDs intensiv wütend werden.

Answer 5

ich realisiere, dass dies ein ziemlich altes Thema ist, aber ich lief gerade über etwas, das relevant sein könnte.

wo ich arbeite, verwenden wir eine selbstgewachsene CMS (riesige, stark frequentierte Website). Ein Div, das normalerweise in einem der cms-Inhaltsblöcke definiert wurde, musste leider hart in die jsp-Seite codiert werden, die diesen Block bedient. Der Grund war, dass der Block selbst in zwei Teile geteilt werden musste, um nur einen Teil seines Inhalts zu aktualisieren. Wir mussten die gleiche Div-ID verwenden, um die Seite nicht zu unterbrechen. Das hat uns dann viele und viele Seiten mit zwei Instanzen dieser ID hinterlassen, bis wir das div aus den cms-Blöcken entfernen können.

der schreckliche Teil: eine Instanz war jetzt der Vorfahre der anderen, und mit Stilen auf beide angewendet, brach die Seite.

auf meinem ersten Versuch habe ich $('#theId').attr('id', ''); die ID zu entfernen, und festgestellt, dass jQuery so tat nur von der ersten Instanz, der ein Vorfahre des zweiten ist. obwohl es mit dem ersten aufhörte, gab es keinen js-fehler.

Vor diesem Hintergrund, bis wir die cms reinigen können,

$('#theId').addClass('notThisOne'); 

$('.notThisOne #theId').attr('id', '');` 

halten Seiten bricht, ob neue (ohne div#theId) oder alt (einschließlich div#theId) -Gehalt im CMS-Block.