Атрибут «данные» в элементах

Question

У меня нет проблем с запуском моего кода. Мой вопрос: это то, что я делаю хорошую практику? Это кросс-браузер / кросс-платформенный совместим? Я использую строгий xtml тип документа.

<div id="element" data='{"foo":"bar"}'></div>
<script type="text/javascript">
  alert($('#element').attr('data'));
</script>

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

<div id="element"></div>
<script type="text/javascript">
  $('#element').data('json', '{"foo":"bar"}');
  alert($('#element').data('json'));
</script>

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

<img id="avatar-1" src="default.png" data='{"src": "user-avatar.png"}' />

без этого мне нужно сделать:

<img id="avatar-1" src="default.png" />
<script type="text/javascript">
  $('#avatar-1').data('json', '{"src": "user-avatar.png"}');
</script>

И это создает десятки ненужных тегов сценария. Я знаю, что могу объединить все эти скрипты в php и затем отобразить их сразу, но код не будет таким читаемым, как в случае решения «data».

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

Answer 1

Как подсказывает parent5446 в своем ответе , хороший способ сделать это - с помощью пользовательских атрибутов данных HTML5. Они начинаются data- и могут использоваться для собственных целей вашего приложения. В противном случае они будут игнорироваться браузером.

Более того, самые последние версии jQuery автоматически загружают их в вызов .data(), поэтому вам не нужно делать хакерский вызов .attr() .

Вы можете использовать следующий HTML-код:

<img id="avatar-1" src="default.png" data-src="user-avatar.png" />

А затем получить к нему доступ следующим образом с помощью jQuery:

alert($('#avatar-1').data('src'));

Answer 2

По какой-то причине кажется, что атрибут данных в том виде, в котором вы его используете, просто не существует.Единственный атрибут данных в XHTML - это тег .Возможно, вы говорите о пользовательских тегах данных в HTML5 .Вполне возможно, что jQuery думает, что ваш код - HTML5, и обрабатывает атрибуты данных как таковые, но я не слишком уверен в этом.JavaScript всегда мог прочитать произвольные атрибуты, но он не будет проверяться, и некоторые разработчики считают это плохой формой.