Как сохранить произвольные данные для некоторых HTML-тегов

Я знаю, что в настоящее время вы используете jQuery, но что, если бы вы определили встроенный обработчик onclick. Тогда вы могли:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

Какую версию HTML вы используете?

В HTML 5 вполне допустимо наличие настраиваемые атрибуты с префиксом data-, например

<div data-internalid = "1337"></div>

В XHTML это неверно. Если вы находитесь в режиме XHTML 1.1, браузер, вероятно, будет жаловаться на это, но в режиме 1.0 большинство браузеров просто игнорируют его.

На вашем месте я бы придерживался подхода, основанного на сценариях. Вы можете сделать его автоматически сгенерированным на стороне сервера, чтобы не беспокоить его поддержку.

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

Альтернативой является установка атрибутов в javascript. В jQuery есть хороший служебный метод только для этой цели, или вы можете использовать свой собственный.

Хакер, который будет работать практически со всеми возможными браузерами, - это использовать такие открытые классы: <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, но не CSSselectors (что здесь не имеет значения), возможно, некоторые браузеры будут полностью запутаны, вам нужно это проверить.

Выполнять забавные вещи, такие как сериализация и десериализация, было бы еще опаснее.

Использование ids для чистого хэша JS в основном работает, за исключением случаев, когда вы пытаетесь скопировать свои теги. Если у вас есть tag<a href = "..." id = "link0">, скопируйте его стандартными методами JS, а затем попробуйте изменить data, прикрепленный только к одной копии, другая копия будет изменена.

Это не проблема, если вы не копируете tag или не используете данные только чтение. Если вы копируете tag и они модифицируются, вам придется справиться с этим вручную.

Почему бы не использовать уже имеющиеся значимые данные вместо добавления произвольных данных?

т.е. используйте <a href = "/articles/5/page-title" class = "article-link">, а затем вы можете программно получить все ссылки на статьи на странице (через имя класса) и идентификатор статьи (сопоставление регулярного выражения /articles/(\d+)/ с this.href).

Одна из возможностей может быть такой:

• Создайте новый div для хранения всех расширенных / произвольных данных
• Сделайте что-нибудь, чтобы этот div был невидимым (например, CSS плюс атрибут класса div)
• Поместите расширенные / произвольные данные в теги [X] HTML (например, как текст в ячейках таблицы или что-нибудь еще, что вам может понравиться) в этом невидимом div

Лично я бы не стал использовать это, но он работает (убедитесь, что ваш JSON действителен, потому что eval () опасен).

<a class = "article" href = "link/for/non-js-users.html">
    <span style = "display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

Если вы уже используете jQuery, вам следует использовать метод «данных», который является рекомендуемым методом для хранения произвольных данных в элементе dom с помощью jQuery.

Чтобы что-то хранить:

$('#myElId').data('nameYourData', { foo: 'bar' });

Чтобы получить данные:

var myData = $('#myElId').data('nameYourData');

Это все, что нужно, но взгляните на документация jQuery для получения дополнительной информации / примеров.

Если ваша реальная работа выполняется на стороне сервера, зачем вам вообще нужна настраиваемая информация в тегах html в выводе? все, что вам нужно знать на сервере, - это индекс любого типа списка структур с вашей пользовательской информацией. Я думаю, вы хотите хранить информацию не в том месте.

Я осознаю, как ни прискорбно, что во многих случаях правильное решение не является правильным. В этом случае я настоятельно рекомендую создать некоторый javascript для хранения дополнительной информации.

Много лет спустя:

Этот вопрос был опубликован примерно за три года до того, как атрибуты data-... стали допустимым вариантом с появлением html 5, поэтому истина изменилась, и исходный ответ, который я дал, больше не актуален. Теперь я предлагаю вместо этого использовать атрибуты данных.

<a data-articleId = "5" href = "link/for/non-js-users.html">

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>

На моем предыдущем работодателе мы все время использовали настраиваемые теги HTML для хранения информации об элементах формы. Уловка: мы знали, что пользователь был вынужден использовать IE.

В то время это плохо работало для FireFox. Я не знаю, изменил ли FireFox это или нет, но имейте в виду, что добавление ваших собственных атрибутов к элементам HTML может поддерживаться или не поддерживаться браузером вашего читателя.

Если вы можете контролировать, какой браузер использует ваш читатель (например, внутренний веб-апплет для корпорации), то непременно попробуйте его. Что может быть больно, правда?

Как пользователь jQuery я бы использовал Плагин метаданных. HTML выглядит чистым, он проверяется, и вы можете встроить все, что можно описать с помощью нотации JSON.

Я рекомендую использовать атрибут rel. XHTML проверяет, сам атрибут используется редко, а данные извлекаются эффективно.

Итак, для этого должно быть четыре варианта:

1. Поместите данные в атрибут id.
2. Поместите данные в произвольный атрибут
3. Поместите данные в атрибут класса
4. Поместите свои данные в другой тег

http://www.shanison.com/?p=321

Вот как я делаю вам страницы ajax ... это довольно простой метод ...

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p = "));
                   }
               }
           });
}

Как это работает, он в основном просматривает все URL-адреса, которые имеют класс 'ajx', и заменяет ключевое слово и добавляет знак # ... поэтому, если js отключен, URL-адреса будут действовать, как обычно ... все " apps "(каждый раздел сайта) имеет собственное ключевое слово ... поэтому все, что мне нужно сделать, это добавить в массив js выше, чтобы добавить больше страниц ...

Так, например, мои текущие настройки установлены на:

 var objApps= ['ads','user'];

Итак, если у меня есть URL-адрес, например:

www.domain.com/ads/3923/bla/dada/bla

сценарий js заменит / ads / часть, поэтому мой URL-адрес окажется

www.domain.com/ads/#p=3923/bla/dada/bla

Затем я использую плагин jquery bbq для соответствующей загрузки страницы ...

http://benalman.com/projects/jquery-bbq-plugin/

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

Важный: Фактический размер файла, который вы включаете, имеет размер только 5 kb, а не 37 kb (размер всего загружаемого пакета)

Вот пример его использования для хранения значений, которые я использую при создании события отслеживания Google Analytics (примечание: data.label и data.value являются необязательными параметрами)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class = "ga-event {category:'button', action:'click', label:'test', value:99}" type = "button" value = "Test"/>

Это хороший совет. Спасибо @Prestaul

If you are using jQuery already then you should leverage the "data" method which is the recommended method for storing arbitrary data on a dom element with jQuery.

Совершенно верно, но что, если вы хотите хранить произвольные данные в старом обычном HTML? Вот еще одна альтернатива ...

<input type = "hidden" name = "whatever" value = "foobar"/>

Поместите свои данные в атрибуты name и value скрытого элемента ввода. Это может быть полезно, если сервер генерирует HTML (то есть скрипт PHP или что-то еще), и ваш код JavaScript будет использовать эту информацию позже.

Правда, не самый чистый, но альтернатива. Он совместим со всеми браузеры и допустимый XHTML. Вам следует НЕТ использовать настраиваемые атрибуты, а также вам не следует использовать атрибуты с префиксом «data-», поскольку он может работать не во всех браузерах. И, кроме того, ваш документ не пройдет проверку W3C.

Другой подход может заключаться в хранении пары ключ: значение в виде простого класса с использованием следующего синтаксиса:

<div id = "my_div" class = "foo:'bar'">...</div>

Это действительно так, и его можно легко получить с помощью селекторов jQuery или специальной функции.

Вы можете использовать скрытые теги ввода. Я не получаю ошибок валидации на w3.org со следующим:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content = "text/html;charset=UTF-8" http-equiv = "content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class = "article" href = "link/for/non-js-users.html">
        <input style = "display: none" name = "articleid" type = "hidden" value = "5" />
      </a>
    </div>
  </body>
</html>

С jQuery вы получите идентификатор статьи примерно так (не проверено):

$('.article input[name=articleid]').val();

Но я бы порекомендовал HTML5, если это возможно.

Вы можете использовать префикс data- своего собственного созданного атрибута случайного элемента (<span data-randomname = "Data goes here..."></span>), но это допустимо только в HTML5. Таким образом, браузеры могут жаловаться на достоверность.

Вы также можете использовать тег <span style = "display: none;">Data goes here...</span>. Но таким образом вы не можете использовать функции атрибутов, и если css и js отключены, это тоже не очень хорошее решение.

Но лично я предпочитаю следующее:

<input type = "hidden" title = "Your key..." value = "Your value..." />

Ввод во всех случаях будет скрыт, атрибуты полностью действительны, и он не будет отправлен, если он находится в теге <form>, поскольку у него нет имени, верно? Прежде всего, атрибуты действительно легко запомнить, а код выглядит красиво и легко для понимания. Вы даже можете поместить в него ID-атрибут, чтобы вы могли легко получить к нему доступ с помощью JavaScript, а также получить доступ к паре ключ-значение с помощью input.title; input.value.

Используя jquery,

хранить: $('#element_id').data('extra_tag', 'extra_info');

получить: $('#element_id').data('extra_tag');

В html мы можем хранить настраиваемые атрибуты с префиксом data- перед именем атрибута, например

<p data-animal='dog'>This animal is a dog.</p>. Проверить документация

Мы можем использовать это свойство для динамической установки и получения атрибутов с помощью jQuery, например: Если у нас есть тег p, например

<p id='animal'>This animal is a dog.</p>

Затем, чтобы создать атрибут под названием «порода» для указанного выше тега, мы можем написать:

$('#animal').attr('data-breed', 'pug');

Чтобы получить данные в любое время, мы можем написать:

var breedtype = $('#animal').data('breed');