使用函數更新jQuery的data（）方法中的值設置等效於匿名函數的變量，而不是返回值

Question

我回答了這個問題： 用jQuery操縱自定義值

有了這個jQuery：

$('img').attr('u', function(i,u) {
    /* i is the index of the current image among all the images returned by the selector,
       u is the current value of that attribute */
    return u.slice(0, -1) + (parseInt(u.replace(/\D/g,''), 10) + 1);
});

鏈接回答 ， JS Fiddle演示答案 。

但后來我覺得我應該使用HTML5下允許的自定義data-*屬性（而不是無效的，盡管是功能的自定義屬性）來“正確”地展示它，所以我將HTML改編為：

<img src="http://placekitten.com/400/500" class="className" click="" id='button4' data-u="button6" data-r="button5" data-l="ele1" data-d="" />

（不，我不知道click屬性的意圖是什么，或者為什么它在那里，所以我不管它。）

並測試了以下jQuery：

$('img').data('u', function(i,u) {
    /* i is the index of the current image among all the images returned by the selector,
       u is the current value of that attribute */
    return u.slice(0, -1) + (parseInt(u.replace(/\D/g,''), 10) + 1);
});

$('img').each(function(){
    console.log($(this).data('u'));
});

JS小提琴演示 。

現在，使用data()方法我意識到該屬性不會被更新，這就是為什么我使用console.log()來確認更新的值，然而輸出是匿名函數本身 ，而不是值我期望從該功能返回。 我意識到這不太可能是一個錯誤，並且可能是預期的行為，但有沒有辦法使用匿名函數來更新屬性，例如，在attr() ， text()等等。？

Answer 1

基本上你的期望是錯誤的。

jQuery的.data根本不修改元素的數據屬性; 它只是通過自己選擇的機制將您提供的數據與元素相關聯 。

有意地未實現該實現，並且.data根本不處理該數據; 你把東西放進去，當你后來要求它時，你就會得到它。 從jQuery的角度來看，數據是完全不透明的。

確實.data提供了來自HTML data-屬性的元素相關數據的預填充作為便利功能，但這不是它的主要任務。 當然，在這種情況下，數據的不透明性仍然得到支持：當您要求數據時，您會准確地回復HTML中指定的內容。

Answer 2

之間的差異data和許多其他的jquery功能（如attr和許多其他）是data可以存儲任何類型的對象。 attr只能存儲字符串值。 因此，想要使用data存儲函數是完全有效的。

如果jquery團隊要為data制作類似的簽名，他們需要以某種方式區分想要存儲函數和想要評估函數。 它可能會讓人感到困惑，因此他們只是沒有執行該功能的能力。

我認為你能做的最好就是使用each 。

Answer 3

如果您需要此功能，可以輕松添加：

$.fn.fdata = function( name, callback ) {
    return this.each( function( i, element ) {
        var $element = $(element);
        var data = callback( i, $element.data(name) );
        $element.data( name, data );
    });
};

現在你可以使用$(sel).fdata( name, callback ); 並在回調中做你想做的事。

擴展現有的$().data()方法以添加回調功能可能很誘人，但正如其他人所指出的，這會破壞任何其他依賴於能夠將函數引用存儲為數據的代碼。

當然，也可能只是添加這個.fdata()方法可能會破壞其他代碼 - 如果頁面上的某些其他代碼也嘗試在其自己的插件中使用相同的方法名稱。 因此，將它作為一個簡單的函數可能更明智。 代碼幾乎完全相同：

function updateData( selector, name, callback ) {
    $(selector).each( function( i, element ) {
        var $element = $(element);
        var data = callback( i, $element.data(name) );
        $element.data( name, data );
    });
}