元素中的“数据”属性

Question

我运行我的代码没有任何问题。我的问题是：这是我正在做的一个好习惯吗？这个跨浏览器/跨平台兼容吗？ 我正在使用 xhtml 严格的文档类型。

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

我给你一个例子，我为什么要这样做。 我正在使用默认头像图像加载一个网站中的所有 cmets 我只想在用户向下滚动时加载正确的图像，因此我需要将正确的图像源存储在某个地方。

<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 中，然后立即显示，但代码不会像“数据”解决方案那样可读。

如果您知道任何更好的解决方案，请告诉我。

Answer 1

作为parent5446 suggests in his answer，最好的方法是使用 HTML5 的自定义数据属性。这些以data- 开头，可用于您的应用程序自己的目的。否则它们将被浏览器忽略。

更好的是，最新版本的 jQuery 会自动将它们加载到 .data() 调用中，因此您无需对 .attr() 进行 hacky 调用。

您可以使用以下 HTML：

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

然后用jQuery通过以下方式访问它：

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

Answer 2

由于某种原因，您使用它的方式中的数据属性似乎根本不存在。 XHTML 中唯一的数据属性是 tag。您可能在谈论自定义data tags in HTML5。很可能 jQuery 认为您的代码是 HTML5 并将数据属性视为 HTML5，但我不太确定那部分。

只是从下面对这个问题的评论中添加，事实证明 JavaScript 一直能够读取任意属性，但它不会验证，并且一些开发人员认为它是错误的形式。