Я делаю страницу, которая имеет некоторое взаимодействие, предоставляемое JavaScript. Просто в качестве примера: ссылки, которые отправляют запрос AJAX для получения содержимого статей, а затем отображают эти данные в div. Очевидно, что в этом примере мне нужна каждая ссылка для хранения дополнительной информации: идентификатора статьи. То, как я справлялся с этим, заключалось в том, чтобы поместить эту информацию в ссылку href:
<a class="article" href="#5">
Затем я использую jQuery, чтобы найти элементы a.article и присоединить соответствующий обработчик событий. (не зацикливайтесь на юзабилити или семантике, это всего лишь пример)
В любом случае, этот метод работает, но он немного пахнет и совсем не расширяется (что произойдет, если функция щелчка имеет более одного параметра? Что делать, если некоторые из этих параметров являются необязательными?)
Сразу очевидным ответом было использование атрибутов элемента. Я имею в виду, для этого они и нужны, верно? (Вид).
<a articleid="5" href="link/for/non-js-users.html">
В своем недавнем вопросе я спросил, был ли этот метод действительным, и оказалось, что если не считать моего собственного DTD (я не знаю), то нет, он недействителен или надежен. Обычным ответом было поместить данные в class
атрибут (хотя это могло быть из-за моего неудачно выбранного примера), но для меня это пахнет еще больше. Да, это технически правильно, но это не очень хорошее решение.
Другой метод, который я использовал в прошлом, состоял в том, чтобы фактически сгенерировать JS и вставить его на страницу в <script>
теге, создав структуру, которая будет ассоциироваться с объектом.
var myData = {
link0 : {
articleId : 5,
target : '#showMessage'
// etc...
},
link1 : {
articleId : 13
}
};
<a href="..." id="link0">
Но это может быть реальная боль в поддержании и обычно просто очень грязно.
Итак, чтобы перейти к вопросу, как хранить произвольные фрагменты информации для тегов HTML ?
источник
Ответы:
Какую версию HTML вы используете?
В HTML 5 полностью допустимо иметь пользовательские атрибуты с префиксом data- , например
В XHTML это не совсем верно. Если вы находитесь в режиме XHTML 1.1, браузер, вероятно, будет жаловаться на это, но в режиме 1.0 большинство браузеров просто игнорируют его.
На вашем месте я бы следовал подходу, основанному на сценариях. Вы можете сделать его автоматически генерируемым на стороне сервера, чтобы не было проблем с поддержкой.
источник
$(this).data('internalid');
вместо:$(this).data('data-internalid');
Если вы уже используете jQuery, вам следует использовать метод «data», который является рекомендуемым методом для хранения произвольных данных в элементе dom с помощью jQuery.
Чтобы что-то хранить:
Чтобы получить данные:
Это все, что нужно сделать, но посмотрите документацию jQuery для получения дополнительной информации / примеров.
источник
Просто я бы не стал использовать это, но это работает (убедитесь, что ваш JSON действителен, потому что eval () опасен).
источник
eval
использованияJSON.parse
вместо jsfiddle.net/EAXmYПроизвольные атрибуты недопустимы, но они абсолютно надежны в современных браузерах. Если вы устанавливаете свойства через javascript, вам не нужно беспокоиться о проверке.
Альтернативой является установка атрибутов в JavaScript. JQuery имеет хороший метод для этой цели, или вы можете использовать свой собственный.
источник
data-
атрибуты вместо этого?Хак, который будет работать практически со всеми возможными браузерами, заключается в использовании открытых классов, таких как:
<a class='data\_articleid\_5' href="link/for/non-js-users.html>;
Это не так уж и элегантно для пуристов, но универсально поддерживается, соответствует стандартам и очень легко манипулируется. Это действительно кажется наилучшим из возможных методов. Если вы
serialize
, изменять , копировать ваши тег, или делать почти все остальное,data
будет оставаться прилагается, скопирован и т.д.Единственная проблема заключается в том, что вы не можете хранить несериализуемые объекты таким образом , и могут быть ограничения, если вы поместите туда что-то действительно огромное.
Второй способ - использовать поддельные атрибуты, такие как:
<a articleid='5' href="link/for/non-js-users.html">
Это более элегантно, но нарушает стандарт, и я не уверен на 100% о поддержке. Многие браузеры поддерживают его полностью, я думаю, что IE6 поддерживает
JS
доступ к нему, но неCSS
selectors
(что на самом деле не имеет значения), возможно, некоторые браузеры будут полностью сбиты с толку, вам нужно проверить это.Делать такие забавные вещи, как сериализация и десериализация, было бы еще опаснее.
Использование
ids
чистогоJS
хэша в основном работает, за исключением случаев, когда вы пытаетесь скопировать ваши теги. Если у вас естьtag
<a href="..." id="link0">
, скопируйте его стандартнымиJS
методами, а затем попытайтесь изменитьdata
прикрепленный только к одной копии, другая копия будет изменена.Это не проблема, если вы не копируете
tag
s или используете данные только для чтения . Если вы скопируетеtag
s и они изменятся, вам нужно будет обработать это вручную.источник
Используя jquery,
хранить:
$('#element_id').data('extra_tag', 'extra_info');
извлечь:
$('#element_id').data('extra_tag');
источник
Я знаю, что вы в настоящее время используете jQuery, но что, если вы определили встроенный обработчик onclick. Тогда вы могли бы сделать:
источник
Вы можете использовать скрытые теги ввода. Я не получаю ошибок проверки на w3.org с этим:
С jQuery вы получите идентификатор статьи с чем-то вроде (не проверено):
Но я бы порекомендовал HTML5, если это вариант.
источник
style="display: none"
это необходимо для скрытых полей ввода.Почему бы не использовать значимые данные, которые уже есть, вместо добавления произвольных данных?
т.е. использовать
<a href="https://stackoverflow.com/articles/5/page-title" class="article-link">
, а затем вы можете программно получить все ссылки на статьи на странице (через имя класса) и идентификатор статьи (сопоставляя регулярное выражение/articles\/(\d+)/
сthis.href
).источник
Как пользователь jQuery я бы использовал плагин Metadata . HTML-код выглядит чистым, он проверяет правильность, и вы можете встраивать все, что можно описать с помощью нотации JSON.
источник
Таким образом, для этого должно быть четыре варианта:
http://www.shanison.com/?p=321
источник
Я защищаю использование атрибута "rel". XHTML проверяет, сам атрибут редко используется, и данные эффективно извлекаются.
источник
Это хороший совет. Благодаря @Prestaul
Совершенно верно, но что, если вы хотите хранить произвольные данные в обычном HTML? Вот еще одна альтернатива ...
Поместите ваши данные в атрибуты name и value скрытого элемента ввода. Это может быть полезно, если сервер генерирует HTML (то есть скрипт PHP или что-то еще), и ваш код JavaScript будет использовать эту информацию позже.
Правда, не самый чистый, но это альтернатива. Он совместим со всеми браузерами и является действительным XHTML. Вы НЕ должны использовать пользовательские атрибуты, а также не должны использовать атрибуты с префиксом data-, так как он может работать не во всех браузерах. И, кроме того, ваш документ не пройдет проверку W3C.
источник
Вы можете использовать префикс данных вашего собственного атрибута made для случайного элемента (
<span data-randomname="Data goes here..."></span>
), но это допустимо только в HTML5. Таким образом, браузеры могут жаловаться на достоверность.Вы также можете использовать
<span style="display: none;">Data goes here...</span>
тег. Но таким образом вы не можете использовать функции атрибутов, и если css и js отключены, это тоже не очень удачное решение.Но лично я предпочитаю следующее:
Входные данные во всех случаях будут скрыты, атрибуты полностью действительны, и они не будут отправлены, если они находятся внутри
<form>
тега, поскольку у него нет имени, верно? Прежде всего, атрибуты действительно легко запомнить, а код выглядит красиво и легко для понимания. Вы можете даже добавить в него ID-атрибут, чтобы вы могли легко получить к нему доступ и с помощью JavaScript, а также получить доступ к паре ключ-значениеinput.title; input.value
.источник
Одна возможность может быть:
источник
Другим подходом может быть сохранение пары ключ: значение в виде простого класса с использованием следующего синтаксиса:
Это верно и может быть легко получено с помощью селекторов jQuery или пользовательской функции.
источник
У моего предыдущего работодателя мы постоянно использовали пользовательские теги HTML для хранения информации об элементах формы. Подвох: мы знали, что пользователь был вынужден использовать IE.
В то время это не сработало для FireFox. Я не знаю, изменил ли FireFox это или нет, но учтите, что добавление ваших собственных атрибутов в элементы HTML может или не может поддерживаться браузером вашего читателя.
Если вы можете контролировать, какой браузер использует ваш читатель (т. Е. Внутренний веб-апплет для корпорации), то непременно попробуйте его. Что может повредить, верно?
источник
Вот как я делаю вам AJAX страницы ... это довольно простой метод ...
Как это работает, он в основном просматривает все URL-адреса, имеющие класс «ajx», заменяет ключевое слово и добавляет знак #, поэтому, если js отключен, URL-адреса будут действовать так, как обычно ... all » apps "(каждый раздел сайта) имеет свое ключевое слово ... так что все, что мне нужно сделать, это добавить массив js выше, чтобы добавить больше страниц ...
Так, например, мои текущие настройки установлены на:
Так что, если у меня есть URL-адрес, такой как:
www.domain.com/ads/3923/bla/dada/bla
js-скрипт заменит / ads / part, так что мой URL окажется
www.domain.com/ads/#p=3923/bla/dada/bla
Тогда я использую плагин BBQ jquery, чтобы загрузить страницу соответственно ...
http://benalman.com/projects/jquery-bbq-plugin/
источник
Я обнаружил, что плагин метаданных является отличным решением проблемы хранения произвольных данных с тегом html таким образом, чтобы его было легко найти и использовать с jQuery.
Важно : фактический размер файла, который вы включаете, составляет всего 5 КБ, а не 37 КБ (это размер полного пакета загрузки)
Вот пример его использования для хранения значений, которые я использую при создании события отслеживания Google Analytics (примечание: data.label и data.value являются необязательными параметрами)
источник
В html мы можем хранить пользовательские атрибуты с префиксом «data-» перед именем атрибута, например
<p data-animal='dog'>This animal is a dog.</p>
, Проверьте документациюМы можем использовать это свойство для динамической установки и получения атрибутов, используя jQuery, например: Если у нас есть тег ap, например:
<p id='animal'>This animal is a dog.</p>
Затем, чтобы создать атрибут под названием «breed» для вышеуказанного тега, мы можем написать:
$('#animal').attr('data-breed', 'pug');
Чтобы получить данные в любое время, мы можем написать:
var breedtype = $('#animal').data('breed');
источник
Если ваша реальная работа выполняется на стороне сервера, зачем вам вообще нужна пользовательская информация в тегах html в выходных данных? Все, что вам нужно знать на сервере, - это указатель на любой список структур с вашей пользовательской информацией. Я думаю, что вы хотите хранить информацию не в том месте.
Я признаю, что, к сожалению, во многих случаях правильное решение не является правильным. В этом случае я настоятельно рекомендую создать некоторый javascript для хранения дополнительной информации.
Много лет спустя:
Этот вопрос был опубликован примерно за три года до того, как
data-...
атрибуты стали верным вариантом с появлением html 5, поэтому правда изменилась, и первоначальный ответ, который я дал, больше не актуален. Теперь я бы предложил вместо этого использовать атрибуты данных .источник