元素中的"data"属性

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在他的回答中所建议的,这样做的好方法是使用HTML5的自定义数据属性.这些开始data-并可用于您的应用程序自己的目的.否则它们将被浏览器忽略.

更好的是,最新版本的jQuery会自动将它们加载到一个.data()调用中,所以你不需要做一个hacky调用.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 始终能够读取任意属性，但它不会验证，并且一些开发人员认为它是不好的形式。