Хранить произвольную информацию в тегах HTML для JavaScript?
-
05-07-2019 - |
Вопрос
Очень общий вопрос.
Я динамически генерирую форму, которая разделена на несколько уровней вкладок с использованием HTML / JavaScript.
Я хочу выделить некоторые поля (те, которые имеют значение, отличное от глобального шаблона) символом звезды * с использованием CSS и background-image.
Поле JS выполняет итерацию по каждому полю, сравнивает его значение и, при необходимости, устанавливает для него класс CSS. Пока все хорошо.
Кроме того, я хочу, чтобы не только каждое измененное поле было помечено звездочкой, но и вкладка , в которой оно находится.
Поскольку я люблю это просто, я хотел бы сохранить идентификатор элемента вкладки в качестве атрибута где-нибудь в HTML-теге каждого поля (что-то вроде " parentTab "). Затем функция JS выделяет поле и его «parentTab». элемент (и, может быть, это тоже «parentTab»). Р>
Мой первый подход заключается в неправильном использовании " заголовка " атрибут или somethiong для хранения parentTab. Конечно, это грязно. Однако, если я просто дико добавлю произвольные атрибуты в тег DIV или INPUT, он больше не будет проверяться, и я чувствую, что доступ к этим атрибутам менее безопасен - кто знает, как различные браузеры обрабатывают его и будут обрабатывать его в будущем? р>
Итак, мой вопрос: существует ли допустимый, совместимый со стандартами способ - какой-то атрибут - хранить произвольные данные внутри тегов HTML для дальнейшей обработки с помощью JavaScript?
Конечно, я мог бы создать " parentTabs " JS массив и покончим с этим. Но хранить его в самом вводе было бы намного элегантнее.
Решение
Вы можете узнать, к какому элементу с вкладками принадлежит поле, написав функцию isChildOf, например: http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html
Использование DOM для решения этой проблемы всегда будет более "элегантным" чем дублирование данных в каком-то произвольном формате.
Другие советы
с введением html5 вы можете использовать атрибуты, которые начинаются с данных -
, и они все равно будут подтверждены.
<input type="text" name="username" data-parentTab="tab1" value="non-default">
Атрибут rel
часто является хорошим выбором для хранения таких данных.
В jQuery у вас есть API данных. http://docs.jquery.com/Internals/jQuery.data
Если вы не используете jQuery, вы можете добавить свои собственные теги и хранить в них что угодно. все скажут вам, что это нехорошо и т. д., но все великие веб-фирмы делают это так что вы окажетесь в отличной компании; -)
Мне нравится, как Джон Резиг сделал это: тег сценария с произвольным типом , Его пример о шаблонизме, но вы действительно можете использовать это для чего угодно.