Javascript 使用jquery从数据属性中提取json

我正在尝试使用jquery从数据属性中获取数据

以下是我所拥有的：

<div id="x" data-foo="{top:'100', left:'40', width:'50'}">

---

我也尝试过JSON解析，但是我遇到了关于意外标记的错误

您可以使用jQuery attr获取数据

x=$（'#x'）.attr（'data-foo'）
然后将其解析为json，如：
var data=JSON.parse（x）
请像这样安排您的代码

 <div id="x" data-foo='{"top":"100", "left":"40", "width":"50"}'> 

 In JSON, Key will be double quote. 


在JSON中，键将是双引号。
您在
数据foo
中拥有的是
Javascript对象文本的字符串，而不是
JSON

首先，您需要正确格式化JSON。见下文

<div id="x" data-foo='{"top":"100", "left":"40", "width":"50"}'></div>

希望它对数据有帮助。foo是一个字符串。它不会自动知道字符串值包含JSON内容。@这似乎是问题的根源。
。data（'foo'）
获取属性值。不需要
attr
。同样的问题。挑战在于使用HTML设置属性中的数据。这确实让我想到了字符串是如何格式化的。我想我已经得到了答案，还有一秒要确认。是的，如果字符串格式正确，可以将其用作JSON对象，否则在解析或访问密钥时会出错。我的eample中合适的字符串应该是（注意引号的使用）：{“top”：“100”，“left”：“40”，“width”：“50”}@JasonLough请转到链接并测试它@Jason如果这是答案，请单击复选标记接受它。请参阅，由于建议使用单引号而不是双引号，此问题很可能被否决：。我建议您坚持使用单引号或双引号，并在
数据foo
值中使用
“
，否则，如果其他人必须维护您的代码，这可能会导致问题。@jason尽管您可以单击复选标记（将被选中），但不能单击向上或向下键
<div id="x" data-foo='{"top":"100", "left":"40", "width":"50"}'></div>

var x = JSON.parse($('#x').attr("data-foo"));
alert( x.top );