Это плохая практика использовать атрибут класса html в качестве дескриптора JavaScript

Question

Мне часто приходится выбирать несколько элементов одновременно с помощью jquery... для этого я обычно просто добавляю класс ко всем элементам, которые я хочу выбрать, а затем использую jquery для выбора по классу.

Это плохая практика или я должен использовать что-то вроде атрибута данных html 5?

Answer 1

Я думаю, что спецификация w3 здесь полезна:

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html

Цитата денег:

Пользовательские атрибуты данных предназначены для хранения пользовательских данных, приватных для страницы или приложения, для которых больше нет подходящих атрибутов или элементов.

Затем он использует пример музыкального сайта, который использует данные для хранения длины музыкальных треков, для сортировки.

Казалось бы, данные должны быть зарезервированы для этих типов использования против классов / идентификаторов, которые предназначены в качестве селекторов.

Вот еще одна полезная статья для размышления на эту тему: http://danwebb.net/2010/1/27/put-that-data-attribute-away-son-you-might-hurt-someone

Answer 2

Я бы сказал, что все в порядке, если нет необходимости передавать аргументы.

т.е. все .flashing к элементам будет применен эффект вспышки. Конец.

Это выходит из-под контроля, когда вы начинаете использовать несколько классов или "классов данных", как class="flashing-15times onhoveronly", так далее...

Как только вам нужно начать передавать аргументы или переменные, вы должны перейти к атрибутам данных или другим методам ООП.

Answer 3

Это отличная практика. Для этого и нужен атрибут класса. Всегда помните, что атрибут class является частью семантической многоуровневой структуры HTML для пометки групп объектов с общим свойством, а не частью CSS. Именно селекторы CSS обеспечивают связь между семантикой HTML и представлением CSS. А пометка групп объектов с общим свойством - это именно то, что вы делаете.

Просто убедитесь, что вы используете значимое имя для коллекции объектов, которые вы хотите собрать вместе, чтобы применить ваше действие jquery.

Answer 4

Раньше это был стандартный способ сделать это. Однако в настоящее время стандартным способом сделать это является использование атрибутов данных. Например, если вы хотите создать плагин, который заставляет определенный элемент иметь всплывающую подсказку, вы можете сделать

<div data-tooltip="This is a div"></div>

Вы можете выбрать элементы с атрибутом data, используя селектор атрибута jquery hass.

$("[data-tooltip]").each(function(){
    generate_tooltip($(this));
});