3

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

4 回答 4

5

我会使用 for..in 循环来读取 data-* 标签。你也不需要驼峰式，因为 jQuery 在内部将它转换为驼峰式...源代码参考。

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

});

演示

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

1.4.4 的演示

于 2012-05-23T14:29:14.617 回答
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-属性。

于 2012-05-23T14:28:12.057 回答
0

尝试使用 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];
}
于 2012-05-23T14:26:28.907 回答
0 
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];
    }
});

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

于 2012-05-23T14:31:47.173 回答