Подтвердить что ты не робот

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

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

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

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

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

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

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

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

Итак, мои вопросы....

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

ОТВЕТЫ

Ответ 1

Значения классов - это... (неопределенные). Значения - это... (окончательный)

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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