Хранить произвольную информацию в тегах HTML для JavaScript?

Question

Очень общий вопрос.

Я динамически генерирую форму, которая разбита на несколько уровней вкладок с использованием HTML / JavaScript.

Я хочу выделить некоторые поля (те, которые имеют значение, отличное от глобального шаблона) с символом звезды * с использованием CSS и background-image.

Поле JS выполняет итерацию по каждому полю, сравнивает его значение и, при необходимости, устанавливает для него класс CSS. Пока все хорошо.

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

Поскольку я люблю это просто, я хотел бы сохранить идентификатор элемента вкладки в качестве атрибута где-нибудь в HTML-теге каждого поля (что-то вроде «parentTab»). Затем функция JS подсвечивает поле и его элемент «parentTab» (и, возможно, этот «parentTab»).

Мой первый подход состоит в том, чтобы неправильно использовать атрибут title или что-то другое для хранения parentTab. Конечно, это грязно. Однако, если я просто дико добавлю произвольные атрибуты в тег DIV или INPUT, он больше не будет проверяться, и я чувствую себя менее защищенным, получая доступ к этим атрибутам - кто знает, как различные браузеры обрабатывают его и будут обрабатывать его в будущем?

Итак, мой вопрос: существует ли допустимый, совместимый со стандартами способ - какой-то атрибут - для хранения произвольных данных внутри тегов HTML для дальнейшей обработки с помощью JavaScript?

Конечно, я мог бы создать массив JS "parentTabs" и покончить с этим. Но хранить его в самом вводе было бы намного элегантнее.

Answer 1

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

<input type="text" name="username" data-parentTab="tab1" value="non-default">

Answer 2

Атрибут rel часто является хорошим выбором для хранения таких данных.

Answer 3

Вы можете узнать, к какому элементу с вкладками принадлежит поле, написав функцию isChildOf, например: http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html

Использование DOM для решения этой проблемы всегда будет более "изящным", чем дублирование данных в каком-либо пользовательском формате.

Answer 4

В jQuery у вас есть API данных по этому вопросу. http://docs.jquery.com/Internals/jQuery.data

Если вы не используете jQuery, вы можете добавить свои собственные теги и хранить в них что угодно. все скажут вам, что это нехорошо и т. д., но все великие веб-фирмы делают это. так что вы окажетесь в отличной компании; -)

Answer 5

Мне нравится, как Джон Резиг сделал это: тег сценария с произвольным типом. Его пример о шаблонизме, но вы действительно можете использовать это для чего угодно.