使用 jQuery 读取不显眼的数据答案

【问题标题】：read unobtrusive data using jQuery使用 jQuery 读取不显眼的数据
【发布时间】：2012-10-12 09:47:47
【问题描述】：

我没有找到任何示例如何使用 jQuery 读取不显眼的数据。例如下面

<a id="deleteFile" href="" data="123">Delete file</a>

我想从一个元素中读取data 属性。该怎么做？

【问题讨论】：

标签： jquery unobtrusive

【解决方案1】：

您应该使用data-*，其中* 是您想要使用的密钥：

<a id="deleteFile" href="" data-file-id="123">Delete file</a>

然后你可以阅读：

$('#deleteFile').data('fileId');

您会注意到该属性已从 file-id 转换为 fileId，这会自动符合规范。还应注意，jquery 将尝试将值转换为其 javascript 本机类型。这意味着该访问的值将是 javascript Number，而不是 s 字符串。如果您有一个领先的0，这可能会产生影响，因为01 将转换为1。如果您明确需要将值作为字符串，请使用attr:

$('#deleteFile').attr('data-file-id');

您还应该注意，在使用 attr 时，您按原样提供完整的属性名称，而不仅仅是 camelCase 中的数据属性名称。

【讨论】：

【解决方案2】：

最好的办法就是直接获取元素属性

$('#deleteFile').attr('data');

如果您使用新的 jquery 库版本（我相信高于 1.6），您还可以将 HTML5 数据属性与 jQuery 的 data() 一起使用。将您的锚链接更改为类似

<a id="deleteFile" href="" data-fileid="123">Delete file</a>

那么你可以使用

$('#deleteFile').data('fileid');

但是不要互换使用它们，只使用一种方法，否则您以后可能会遇到问题，因为 jQuerys data() 只会读取数据属性，然后将它们存储在内部缓存中。如果您通过data() 更改任何内容，则在实际标签属性中不会更改，这意味着data() 和attr() 之后将返回不同的结果

【讨论】：

【解决方案3】：

最好像这样定义数据属性：

<a id="deleteFile" href="" data-id="123">Delete file</a>

然后你就可以阅读了：

var id = $('#deleteFile').data('id');

在这种情况下使用attr 并不是一个好主意。

【讨论】：

【解决方案4】：

如果你想坚持你的编码，那么你可以试试这个

var a = $("#deleteFile").attr("data");

这是一个演示http://jsfiddle.net/Ht7Eg/3/

【讨论】：