jquery以JSON格式访问html5自定义数据属性

Question

我使用php：

构建了包含自定义数据属性的表行

<tr id="92280001" style='font-weight:bold' data-seqSet={'set':'1',seq1:'foo',seq2:'bar'}>

在我的脚本中，我需要在点击表格行时获取这些值（set，seq1，seq2）：

isSet=$(this).closest('tr').data('seqset').set;
console.log(isSet);

它给了我未定义的。我需要它等于1.但是当我使用时：

isSet=$(this).closest('tr').data('seqset');
console.log(isSet);

然后它打印整个JSON。我错过了什么？

Answer 1

您的属性不是JSON。因为jQuery无法将此字符串解析为JSON。基本上它使用try-catch块进行检查，如果它能够解析它，那么jQuery将返回对象作为.data调用的结果。

使其成为有效的JSON字符串然后它将起作用：

data-seqSet='{"set": "1", "seq1": "foo","seq2": "bar"}'

注意，需要如何使用"正确引用属性。

<小时/> 源代码参考：

这是一个用于将属性字符串转换为对象的函数： https://github.com/jquery/jquery/blob/1777899a747647f3fa839eea4b0bb695d3b60f06/src/data.js#L42（来自https://github.com/jquery/jquery/blob/1777899a747647f3fa839eea4b0bb695d3b60f06/src/data.js#L153）。

Answer 2

正如@dfsq指出的那样，如果检测到格式正确的JSON字符串，jQuery .data（）会将该属性解析为对象。因此，解决方案是更正您的JSON格式以将键值包装在"

中

data-seqSet = {"set": "1", "seq1": "foo", "seq2": "bar"}

isSet = $(this).closest('tr').data('seqset').set;
alert(isSet);

Answer 3

php中的

必须是：echo "<tr id='92280001' style='font-weight:bold' data-seqSet='{\"set\":\"1\",\"seq1\":\"foo\",\"seq2\":\"bar\‌​"}'>";