javascript - 访问 HTML5 数据属性

Question

我正在尝试使用 HTML5 data-* 属性。但是我使用的是 EasyUI 框架，它有问题。

HTML5定义选项设置如下： <div data-options="{region:'north', title:'North Region', border:true}">

但 EasyUI 强制它们设置为（没有大括号）： <div data-options="region:'north', title:'North Region', border:true">

有没有办法在不编写我自己的解析器函数的情况下访问属性对象？如果必须，我必须，但我认为必须有更好的方法。

谢谢你的帮助。

Answer 1

查看源代码，有一种方法可以做到这一点。

$.parser.parseOptions(element);

仅提取方法的演示：http: //jsfiddle.net/FnJAE/

注意：此方法未记录在案，因此如有更改，恕不另行通知。

Answer 2

仅供参考，你真的不必做所有的解析。尽管您的 HTML 确实需要在引号中进行一些更改：_{请参阅参考 jQuery.Data() HTML5}

HTML

<div id="Bob" data-options='{"region":"north", "title":"North Region", "border":"true"}'></div>

脚本

console.log($("#Bob").data("options").title);
// Will return String "North Region"

console.log($("#Bob").data("options").region);
// Will return String "north"

console.log($("#Bob").data("options").border);
// Will return String "true"

console.log($("#Bob").data("options")
// will return a JSON Object but it is EASY to convert to Array
var eleData = $("#Bob").data("options"),
    eleArray = new Array();
for (x in eleData) { eleArray[x] = eleData[x]; }

Answer 3

如果您知道它将始终被格式化为一个对象，您可以：

jsonData = JSON.parse("{" + element + "}");