Question

我有一个基础插件类，我用作所有jQuery插件的基础。它类似于jQuery UI小部件，但对我来说做了很多繁重的工作。

我现在希望将data-属性值从附加元素映射到传递给插件的任何选项中。这将允许插件不仅采用典型的options对象，还允许在单个元素上使用数据驱动的覆盖值（常见要求）。

我遇到的问题是我的选项属性通常是混合大小写，例如MaxHeight，但显然HTML规范仅允许小写字符成为data-属性名称。

作为示例测试平台：http://jsfiddle.net/TrueBlueAussie/tfkrwq09/1/

HTML：

<div id="test" data-DataTest="test2"></div>

jQuery的：

var object = {
    DataTest: 123
};
$.each($('#test').data(), function (k, v) {
    object[k] = v;
});

console.log(object.datatest); // test
console.log(object.DataTest); // 123

期望的结果：

console.log(object.datatest); // undefined
console.log(object.DataTest); // test

我正在寻找将data-属性映射到大小写混合属性的方法，同时保留当前的速度和简单性（如果可能的话）。

Answer 1

请参阅以下有关camelCased规则的链接：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

所以在你的情况下，我会使用：

<div id="test" data--data-test="test2"></div>

获得：

object.DataTest; //test2

是否有一种简单/快速的方法将“data-”属性映射到大小写混合属性名称？

1 个答案: