Можно ли когда-нибудь иметь несколько идентификаторов на HTML-странице?

Question

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

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

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

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

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

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

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

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

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

Answer 1

Среднее значение классов - это ... (неопределенный) идентификатор ID означает - это ... (окончательный)

"Этот элемент представляет собой панель инструментов с фотографиями.Там может быть больше, как это. "Имеет смысл, я бы использовал класс.

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

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

Answer 2

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

Дело не в том, что браузеры сломаются, а скрипты , которые сломаются.jQuery, все, что использует .getElementById и т. д.

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

Answer 3

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

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

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

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

Помня об этом, пока мы не сможем очистить cms,

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

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

будет препятствовать разрыву страниц, будь то новые (без div#theId) или старые (включая div#theId)содержимое находится в блоке cms.

Answer 4

Если у вас есть две кнопки, у вас должно быть два разных идентификатора для их идентификации. Вы можете использовать классы для их стилизации, но ничто не мешает вам использовать одну функцию 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 5

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

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

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