jQuery將data- *屬性轉換爲較低的駝峯屬性

我有以下jQuery腳本來初始化一個名爲poshytips的jQuery插件。我想使用Html5數據屬性來配置插件。我正在重複自己的大好時光，任何人都可以想出一個更好的方式來做到這一點？jQuery將data- *屬性轉換爲較低的駝峯屬性

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

來源

2012-05-23 superlogical

我會使用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

的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

來源

2012-05-23 14:29:14

+1此內容適用於：更新版本的jQuery。試試它與jQuery 1.4.4它工作不同！ – superlogical

@superlogical是啊..你用什麼版本？ –

@superlogical更新了jQuery 1.4.4的文章。從jQuery src複製camelCase代碼。 –

嘗試使用for for循環。

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-23 14:26:28

但我想從data-offset-x轉換爲offsetX。使用$ this.data（）會引入Html5屬性並去除數據部分。但我需要將offset-x轉換爲offsetX :) – superlogical

不要使用'for（var ... in ...）' - 它僅僅用於對象而已...... – Andreas

@superlogical好像當您迭代數據標記，jQuery內部已將鍵更改爲camelcase .. >> http://jsfiddle.net/3eeqV/ << [Check here]（http://stackoverflow.com/a/10722089/297641） –

事情是這樣的 - 它轉換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-23 14:28:12 MartinHN

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-23 14:31:47

jQuery將data- *屬性轉換爲較低的駝峯屬性

回答

相關問題