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

StackOverflow https://stackoverflow.com/questions/1600106

  •  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, вы можете добавить свои собственные теги и хранить в них что угодно. все скажут вам, что это нехорошо и т. д., но все великие веб-фирмы делают это так что вы окажетесь в отличной компании; -)

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top