javascript - Html 5 数据属性转换为 jquery 插件选项格式

Question

除了 jquery 插件选项之外，我还想用 html5 数据属性覆盖这些值。

<小时/>

这是选项所需的格式:

var defaults = {
   text: {
      color: 'red',
      opacity: 0.5
   },
   button: {
      width: 100,
      height: 30
   }
}

我想格式化数据属性，如下所示:

<div data-text="color:'red', opacity: 0.5"></div>

...但是您将无法读取此数据o.text.color，因为它根本不存在。然而o.text里面有数据。

如何格式化数据属性，以便可以使用 o.text.color 获取值？

Answer 1

只需将一个 json 字符串格式的对象传递给属性，jQuery 数据就会为您解析它。

<div class="test" data-test='{ "test1":"Lorem","test2":"Ipsum" }'></div>

另请参阅updated fiddle