Допустимо ли иметь несколько идентификаторов на странице html?

Question

Существует много вопросов о переполнении стека около id vs class, но эти вопросы почти всегда относятся к CSS, и общепринятым ответом является использование классов для стилизации определенного набора элементов и идентификаторов для определенных экземпляров. Имеет смысл, справедливо.

Я обнаружил, однако, что, поскольку я делаю все больше и больше Javascript/jQuery/ajax, этот подход начинает становиться менее четким, и я нахожу ситуации, когда семантически элементы должны быть заданы ids, а потому, что может быть несколько экземпляров я должен использовать классы.

Вот пример того, что я имею в виду:

Посмотрите на панели инструментов редактора уценки вопрос о переполнении стека в - каждая кнопка имеет идентификатор, чтобы однозначно идентифицировать его. Отличный смысл - это одна кнопка, которая выполняет определенную функцию, и, вероятно, сценарий привязан к ней на основе этого идентификатора.

Теперь представьте, что я создаю богатое веб-приложение, и есть страница, на которой есть две вкладки, каждая из которых содержит редактор уценок. Означает ли это, что кнопки панели инструментов теперь должны использовать классы до : их?

Это просто кажется неправильным.

Другой пример: Я работаю над сайтом фотогалереи, на котором есть небольшая панель инструментов, наложенная на каждую фотографию. В Конвенции говорится, что, поскольку есть несколько экземпляров этих кнопок, я должен использовать классы. В самом деле?

Так что мои вопросы ....

• Если бы я совершил преступление дублирующих идентификаторов на странице, что браузеры будут фактически разорвать?
• Для браузеров, где это происходит, это просто стилизация CSS, которая сломается, или селектора jQuery также сломаются.
• Действительно ли так плохо использовать дубликаты идентификаторов в случаях, подобных описанным.

Answer 1

Классы означают это ... (неопределенные) Идентификаторы означают является ... (окончательное)

«Это ДИВ является фото- панель инструментов. Там может быть больше нравится ». Имеет смысл, я бы использовал класс.

Я бы не стал идентификатором кнопок панели инструментов, если бы не был уверен, что на странице может быть только один экземпляр этой панели инструментов. В случае с редактором markdown StackOverflow, я также думаю, что это должны быть классы для большей гибкости (весь редактор может быть обернут в уникальный идентификатор, например, # answer-editor или # comment-editor).

Браузеры довольно гибкие в том, что они принимают, но это не значит, что стандарты должны быть нарушены.

Answer 2

• Если бы я совершил преступление дублирующих идентификаторов на странице, что браузеры будут фактически разорвать? HTML-валидаторы жалуются, потому что атрибуты id должны быть уникальными, , но большие три браузеров позволяют мне с ним справиться.

• Для браузеров, где это происходит, это просто стилизация CSS, которая сломается, или будут переключаться селекторы jQuery. jQuery selector не работает или может не работать должным образом. как определено для выбора уникального

• Действительно ли так плохо использовать дублирующие идентификаторы в случаях, подобных описанным. каждого стандарт, его не хорошая практика, таким образом пытаясь избежать столько, сколько вы можете будете много смысла в браузер, JQuery ....

Answer 3

Если у вас есть две кнопки, вы должны иметь два различные идентификаторы для их идентификации ,Вы можете использовать классы для их стиля, но ничто не мешает вам использовать одну функцию Javascript для двух кнопок:

$("#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) 
}; 

Конечно, ваша кнопка обычно взаимодействует с TextArea некоторых видов, и два прокручиваемыми должны иметь разные идентификаторы. Потому что тогда вы можете просто сделать это:

$("#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

Не делайте этого.

Это не то, что браузеры сломается, это сценарии что сломается. jQuery, что угодно, используя .getElementById и т. д.

В какой-то момент кому-то может понадобиться работать с приложением, и я ожидаю, что они будут сильно разъярены дублирующимися идентификаторами.

Answer 5

Я понимаю, что это довольно старая тема, но я просто столкнулся с чем-то, что может быть уместным.

где я работаю, мы используем самодельные cms (огромный сайт с высоким трафиком). div, который обычно был определен в одном из блоков контента cms, к сожалению, должен быть жестко закодирован на страницу jsp, которая обслуживает этот блок. причина заключалась в том, что сам блок нужно было разделить на два, что упростило обновление только одной части его содержимого. нам нужно было использовать один и тот же идентификатор div, чтобы не нарушать страницу. который затем оставил нам много и много страниц с двумя экземплярами этого идентификатора, пока мы не сможем пройти и удалить div из блоков cms.

ужасная часть: один экземпляр был теперь предком другого, и со стилями, применяемыми к обоим, страница сломалась.

на моей первой попытке я добавил $('#theId').attr('id', ''); удалить идентификатор, и обнаружил, что JQuery сделал так только с первого экземпляра, который является родоначальником второго. даже несмотря на то, что он остановился с первым, не было ошибки js.

держать это в виде, пока мы не можем очистить СЕ,

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

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

будет держать страницы от взлома, будь то новый (не div#theId) или старый (в том числе div#theId) содержание в блоке ОГО.