Question

我在运行代码时没有遇到任何问题。我的问题是：这是我正在做的好事吗？这种跨浏览器/跨平台兼容吗？我正在使用xhtml strict doctype。

<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中合并所有这些脚本而不是立即显示，但代码不会像“数据”解决方案那样可读。

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

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并且对数据属性进行处理，但我对此并不太确定。

只是在下面对此问题的评论中添加，结果是JavaScript始终能够读取任意属性，但它不会验证，而且一些开发人员认为它是不好的形式。

元素中的“data”属性

2 个答案: