为什么 jquery 从数据 html5 属性中删除括号？答案

【问题标题】：Why does jquery remove brackets from data html5 attribute?为什么 jquery 从数据 html5 属性中删除括号？
【发布时间】：2016-02-15 01:09:00
【问题描述】：

我正在尝试使用 jquery 获取数据属性的内容，但返回的数据不是我设置的。

通过这个简单的例子：

<div id="test" data-test="[1]"></div>

但是$('#test').data('test') 返回1 而不是[1]

使用纯javascript没问题。

在线查看：https://jsfiddle.net/jojhm2nd/

【问题讨论】：

试试attr('data-test')。

标签： javascript jquery html html5-data

【解决方案1】：

jQuery 的data 不是属性访问器函数。（这是一个常见的错误，很容易犯。）要访问该属性，请使用attr。

$("#test").attr("data-test");

data 确实读取了data-* 属性，但只是为该元素初始化 jQuery 的数据缓存。（而且它从不写入属性。）它会做一系列事情，包括更改名称（例如，data-testing-one-two-three 变为 testingOneTwoThree）和解释值。在这种情况下，它将值解释为一个数组，因为它以[ 开头。当您使用alert 显示该数组时，它会被强制转换为字符串，而当您将数组强制转换为字符串时，则会执行Array#join。例如，如果您的属性是 [1, 2]，那么您会看到 1,2 作为结果。

来自上面链接的文档：

每次尝试都将字符串转换为 JavaScript 值（这包括布尔值、数字、对象、数组和 null）。如果这样做不会更改值的表示，则仅将值转换为数字。例如，“1E02”和“100.000”等价于数字（数值 100），但转换它们会改变它们的表示，因此它们保留为字符串。字符串值“100”被转换为数字100。

当数据属性是对象（以'{'开头）或数组（以'['开头）时，使用jQuery.parseJSON解析字符串；它必须遵循有效的 JSON 语法，包括引用的属性名称。如果该值无法解析为 JavaScript 值，则将其保留为字符串。

【讨论】：

【解决方案2】：

当您使用.data 方法时，jQuery 会发挥作用。

来自 jQuery 网站：

每次尝试将字符串转换为 JavaScript 值（这包括布尔值、数字、对象、数组和 null）。

您可以使用.attr 方法并执行以下操作：

$('#test').attr('data-test');

【讨论】：