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

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



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


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



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



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



<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-тегов?

381   20  

20 ответов:

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

в HTML 5, это полностью допустимо иметь пользовательские атрибуты с префиксом data -, например,

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

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

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

339  
2017-06-30 18:42:26

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

хранить что-то:

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

для получения данных:

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

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

131  
2009-01-11 06:31:31

просто другой способ, я лично не использовал бы это, но он работает (убедитесь, что ваш 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);
20  
2009-01-11 05:48:33

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

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

12  
2009-01-11 04:21:40

хак, который будет работать с почти всеми возможными браузерами, должен использовать открытые классы следующим образом:<a class='data\_articleid\_5' href="link/for/non-js-users.html>;

это не все, что элегантно для пуристов, но это универсально поддерживается, соответствует стандартам и очень легко манипулировать. Это действительно кажется лучшим возможным методом. Если вы serialize,изменить,скопировать ваши теги, или делать почти все остальное,data останется прикрепленным, скопированным etc.

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

второй способ-использовать поддельные атрибуты как: <a articleid='5' href="link/for/non-js-users.html">

это более элегантно, но нарушает стандарт, и я не уверен на 100% в поддержке. Многие браузеры поддерживают его полностью, я думаю, что IE6 поддерживает JS доступ для него, но не CSSselectors (что на самом деле не имеет значения здесь), может быть, некоторые браузеры будут полностью запутаны, вам нужно это проверить.

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

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

это не проблема, если вы не копируете tagS, или использовать только для чтения данные. Если вы копируете tags и они изменены, вам нужно будет справиться с этим вручную.

10  
2014-11-06 11:50:20

используя jquery,

в магазине: $('#element_id').data('extra_tag', 'extra_info');

для получения: $('#element_id').data('extra_tag');

7  
2015-07-20 20:21:39

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

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>
6  
2009-01-11 04:15:09

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

6  
2011-11-12 10:48:02

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

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

4  
2009-01-11 04:28:11

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

4  
2009-08-20 16:12:00

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

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

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

3  
2010-06-06 15:45:40

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

2  
2009-10-27 17:13:22

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

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

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

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

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

по общему признанию, не самый чистый, но это альтернатива. Он совместим со всеми браузеры и допустим XHTML. Вы должны не используйте пользовательские атрибуты, и вы не должны использовать атрибуты с префиксом " data -", так как он может работать не во всех браузерах. И, кроме того, ваш документ не пройдет проверку W3C.

2  
2011-10-11 19:47:54

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

2  
2012-08-24 19:54:10

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

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

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

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

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

1  
2011-10-27 18:37:00

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

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

0  
2009-01-11 06:32:21

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

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

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

0  
2009-01-11 07:52:44

вот как я делаю вам 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/ads/3923/bla/dada/bla

в JS скрипт будет заменить /объявления/ части, так что мой URL-адрес будет в конечном итоге

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

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

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

0  
2011-04-30 15:51:34

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

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

вот пример его использования для хранения значений, которые я использую при создании отслеживания google analytics событие (Примечание: данные.метка и данные.значение бывает необязательным params)

$(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"/>
0  
2011-09-09 17:31:12

Comments

    Ничего не найдено.
Click here to cancel reply.