Javascript jQuery将数据-*属性转换为小写属性

我有以下jQuery脚本来初始化一个名为poshytips的jQuery插件。我想使用Html5数据属性配置插件。我一直在重复我自己，有谁能想出更好的方法来做到这一点吗

$('.poshytip-trigger').each(function (index) {
    var $this = $(this);
    var data = $this.data();

    var options = {};

    if (data['class-name']) {
        options.className = data['class-name'];
    }

    if (data['align-x']) {
        options.alignX = data['align-x'];
    }

    if (data['align-y']) {
        options.alignY = data['align-y'];
    }

    if (data['offset-y']) {
        options.offsetY = data['offset-y'];
    }

    if (data['offset-x']) {
        options.offsetX = data['offset-x'];
    }

    $this.poshytip(options);
});

---

尝试使用for-in循环

var array = ['class-name', 'align-x', 'align-y', 'offset-y', 'offset-x'];
for (x in array) {
    if(data[array[x]]) {
        options[array[x]] = data[array[x]];
    }
}

更新：针对OP的澄清，他可以这样写：

var Pair = function(hyphenated, camcelCased) {
    this.hyphenated = hyphenated;
    this.camelCased = camelCased;
}
var array = [
    new Pair('class-name', 'ClassName'),
    new Pair('align-x', 'alignX'),
    new Pair('align-y', 'alignY'),
    new Pair('offset-x', 'offsetX'),
    new Pair('offset-y', 'offsetY')];
var i, optionNameHyphenated, optionNameCamelCased;
for(i = 0; i < array.length; i++) {
    optionNameHyphenated = array[i]['hyphenated'];
    optionNameCamelCased = array[i]['camelCased'];
    if (data[optionNameHyphenated]);
        options[optionNameCamelCased] = data[optionNameHyphenated];
}  

var Pair=function（连字符，camcelCased）{
this.hyphenated=已连字符；
this.camelCased=camelCased；
}
变量数组=[
新对（'ClassName'，'ClassName'），
新对（'align-x'，'alignX'），
新对（'align-y'，'alignY'），
新对（'offset-x'，'offset-x'），
新对（'offset-y'，'offsetY'）]；
变量i，OptionName连字符，optionNameCamelCased；
对于（i=0；i

类似的东西-它确实将

offset-x

转换为

offsetX

：

HTML:

---

但我认为Daniel的方法更好，因为他明确控制设置哪些属性。这将获取所有

数据-

属性。

我将使用for..in循环读取数据-*标记。。另外，您不需要在jQuery内部将camelcase转换为camelcase

对于jQuery 1.4.4

$('.poshytip-trigger').each(function(index) {
    var $this = $(this);
    var data = $this.data();
    var options = {};

    for (var keys in data) {
        options[camelCase(keys)] = data[keys];
    }
});

//copied from http://james.padolsey.com/jquery/#v=git&fn=jQuery.camelCase
function camelCase(str) {
    return str.replace(/^-ms-/, "ms-").replace(/-([a-z]|[0-9])/ig, function(all, letter) {
        return (letter + "").toUpperCase();
    });
}

---

这行吗？与其他答案不同，这段代码只转换显式设置的属性，并保留选项对象属性名称camelCase。

但我想从data-offset-x转换为offsetX。使用$this.data（）会拉入Html5属性并剥离数据部分。但我需要将offset-x转换为offset-x:）@superlogical似乎在您迭代数据标记时，jQuery internall将键更改为camelcase..>>+1这适用于较新版本的jQuery。用jQuery 1.4.4试试看，它的工作方式不同@是的。。您使用的是什么版本？@superlogical更新了jQuery 1.4.4的帖子。从jQuery src复制了camelCase代码。

$(document).ready(function() {
    var options = {};

    for (var key in $("p").data()) {
       options[key] = $("p").data(key);
    }

    console.log(options);
});​

$('.poshytip-trigger').each(function (index) {
    var $this = $(this);
    var data = $this.data();
    var options = {};

    for (var keys in data) {
        options[keys] = data[keys];            
    }

    // For older versions of jQuery you can use $.camelCase function
    for (var keys in data) {
        options[$.camelCase(keys)] = data[keys];
    }

});

$('.poshytip-trigger').each(function(index) {
    var $this = $(this);
    var data = $this.data();
    var options = {};

    for (var keys in data) {
        options[camelCase(keys)] = data[keys];
    }
});

//copied from http://james.padolsey.com/jquery/#v=git&fn=jQuery.camelCase
function camelCase(str) {
    return str.replace(/^-ms-/, "ms-").replace(/-([a-z]|[0-9])/ig, function(all, letter) {
        return (letter + "").toUpperCase();
    });
}

var names = ["className", "alignY", ...];
$(names).each(function(ind, name){
    var dataName = name.replace(/[A-Z]/, function(letter){
        return letter.toLowerCase();
    });
    if(data[dataName]){
        options[name] = data[dataName];
    }
});