Question

我有以下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);
});

Answer 1

我会使用for..in循环来读取data- *标签。此外，您不需要使用camelcase，因为jQuery会在内部将其转换为camelCase ... Source code reference。

$('.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];
    }

});

DEMO

for 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();
    });
}

DEMO for 1.4.4

Answer 2

这样的事情 - 确实将offset-x转换为offsetX：

http://jsfiddle.net/8C4rZ/1/

HTML：

<p data-test="sdsd" data-test2="4434"></p>

JavaScript的：

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

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

    console.log(options);
});

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

Answer 3

尝试使用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];
}

Answer 4

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];
    }
});

这有用吗？与其他答案不同，这段代码只转换显式设置属性并保留options-object属性名称camelCase。

jQuery将data- *属性转换为较低的camel case属性

4 个答案: