Как хранить произвольные данные для некоторых тегов 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

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

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

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

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

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

Answer 2

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

Для хранения чего-либо:

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

Для извлечения данных:

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

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

Answer 3

Просто я бы не стал использовать это, но он работает (убедитесь, что ваш 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);

Answer 4

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

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

Answer 5

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

Answer 6

Используя jquery,

для хранения: $('#element_id').data('extra_tag', 'extra_info');

для извлечения: $('#element_id').data('extra_tag');

Answer 7

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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