3

poshytipsと呼ばれるjQueryプラグインを初期化するための次の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ループを使用してデータを読み取ります-*タグ..また、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);
});​

しかし、ダニエルはどの属性が設定されるかを明示的に制御するため、ダニエルのアプローチの方が優れていると思います。これはすべての data-属性を取ります。

于 2012-05-23T14:28:12.057 に答える
0

forinループを使用してみてください。

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

これは機能しますか？他の回答とは異なり、このコードは明示的に設定された属性のみを変換し、options-object属性名camelCaseを保持します。

于 2012-05-23T14:31:47.173 に答える