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

Question

Я делаю страницу, которая взаимодействует с javascript. Просто в качестве примера: ссылки, которые отправляют запрос AJAX для получения содержимого статей, а затем отображают эти данные в div. Очевидно, что в этом примере мне нужна каждая ссылка для хранения дополнительной информации: идентификатора статьи. То, как я справлялся с этим, заключалось в том, чтобы поместить эту информацию в ссылку href:

<a class="article" href="#5">

Затем я использую jQuery, чтобы найти элементы a.article и присоединить соответствующий обработчик событий. (не зацикливайтесь на юзабилити или семантике, это всего лишь пример)

В любом случае, этот метод работает, но он пахнет немного и не расширяется вообще (что произойдет, если функция щелчка имеет более одного параметра? Что делать, если некоторые из этих параметров являются необязательными? ) * +1010 *

Сразу очевидным ответом было использование атрибутов элемента. Я имею в виду, для этого они и нужны, верно? (Вид).

<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 ?

Answer 1

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

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

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

Answer 2

Вы можете использовать префикс данных вашего собственного атрибута made для случайного элемента (<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.

Answer 3

Это хороший совет. Благодаря @ Prestaul

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

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

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

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

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

Answer 4

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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

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

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

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

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

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

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

Answer 8

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

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

Answer 9

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

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

Вот пример его использования для хранения значений, которые я использую при создании события отслеживания 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"/>

Answer 10

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

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

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

Так что, если у меня есть URL-адрес, такой как:

www.domain.com / реклама / 3923 / ли / дада / л

js-скрипт заменит / ads / part, поэтому мой URL будет

www.domain.com / реклама / # р = 3923 / л / дада / ли

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

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