访问HTML5数据属性

我正在尝试使用HTML5数据属性。但是我使用的是EasyUI框架，它存在问题。访问HTML5数据属性

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

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

是否有访问属性对象不写我自己的方式解析器功能？如果我必须我必须但我认为必须有更好的方法。

感谢您的任何帮助。

来源

2012-11-20 user1389920

第一步：文件与EasyUI的错误。第二步：使属性有效的JSON，以便解析它。 – epascarello

这两种形式都不是有效的JSON，所以是的，你必须编写自己的解析器。 – Pointy

您可以使用jQuery .data（）或.attr（） –

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

$.parser.parseOptions(element);

演示只用该方法提取：http://jsfiddle.net/FnJAE/

注：此方法未记录，因此它是随时更改，恕不另行通知。

来源

2012-11-20 19:19:38

这正是我想要的。完美的作品。非常感谢！ – user1389920

如果你知道它会永远被格式化为一个对象，你可以只：

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

来源

2012-11-20 19:32:41 jeremy

这将无法正常工作，即使括号中的json仍然无效。 –

仅供参考，你真的没有做所有的解析。虽然你的HTML确实需要加引号一些变化：_{See Reference 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]; }

来源

2012-11-20 20:05:10 SpYk3HH

我同意，修正数据是正确的json，但这不是一个选项，没有修改easyui核心（这不会是那么困难，tbh）。 http://www.jeasyui.com/documentation/index.php# –

我仍然说jQueryUI是100倍更好，更有利。 – SpYk3HH

访问HTML5数据属性

回答

相关问题