訪問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

如果您知道它將始終被格式化為對象，則可以：

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

Answer 3

僅供參考，您真的不必進行所有解析。 盡管您的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]; }