jQuery .data（）與$（this）不起作用

Question

我想存儲我的input字段的初始數據（以便能夠在稍後檢查這些初始值）。因此，我用下面的代碼片段，當我的頁面加載：

$(document).ready(function() { 
    $('input').data('initial-value', $(this).val()) 
} 

的問題是，上述的input場的初始值不存儲在數據屬性initial-value。該屬性未被創建。

下不工作：

$('input').data('initial-value', 'whatever value') 

我不能使用jQuery的$(this)運營商.data()方法裏面？如果是這樣，我還能做什麼？

Answer 1

你會需要一些迭代是什麼，以及.each也是爲你正確的this參考：

$('input').each(function() { 
    $.data(this, 'initial-value', this.value); 
}); 

Fiddle

我用提供更好性能的靜態$.data方法，但您也可以使用$(this).data('initial-value', this.value)。

此外，this.value會做很好，並提供更好的性能比$(this).val() - 缺點是當你與multiple屬性這.val()而.value只返回第一個返回值與所選值的數組元素select。

---

雖然，您可以通過元素的defaultValue屬性獲取初始值。例如： -

console.log($('input')[0].defaultValue); 

Fiddle

注意，這種方法不適用於select元素工作。這需要迭代選擇的option元素並檢查它們的defaultSelected屬性，但在這種情況下，使用前一種解決方案更容易。

Answer 2

在這種情況下，由於沒有上下文，因此this引用全局對象。

此外，你不需要這個。只要.attr("value")會給你的初始值;）

Answer 3

如何像這樣

$('input').each(function(){$(this).data('initial-value',$(this).val());}) 

Answer 4

首先，你提供的服務將不會因爲this工作的代碼是指document的input元素代替。你需要更新你的代碼：

jQuery(function ($) { //aliasing document.ready shortcut, good practice 
    "use strict"; 
    $('input').data('initial-value', $('input').val()); 
}); 

當然，這可能不會做你想做什麼或者，因爲它會設置每輸入元素存儲第一的初始值輸入元素（.val()返回第一個匹配元素的值）。

所以更新的代碼爲各種元素，你會使用：

jQuery(function ($) { 
    "use strict"; 
    $('input').each(function() { 
     $(this).data('initial-value', $(this).val()); 
    }); 
}); 

但是，我們需要進入你爲什麼要打擾存儲元素的初始值問題首先。如果有人改變輸入元素與$(someElement).val('new value');值，輸入可以通過其值設置回它被重置的[value]屬性：

$(someElement).val($(someElement).attr('value')); 

如果，另一方面，你設置的input的價值元素與$(someElement).attr('value', 'new value');，你做錯了，並正在破壞你的input元素的狀態。 reset按鈕依賴於保留原始狀態的[value]屬性，因此當form重置時，輸入可以返回到其原始狀態。

還提到：

的問題是，上述的input字段的初始值不存儲在數據屬性initial-value。該屬性未被創建。

當您使用.data()訪問一個元素上的數據，它將從[data-*]屬性提取信息，如果[data-*]屬性都存在。這對初始化元素上的數據非常有用。

當您使用.data(key, value)將數據與元素相關聯時，它會將該值作爲屬性存儲在該元素上; 它不會更新屬性值。沒有辦法序列化例如new Foo這樣的實例化對象，以便可以將其反序列化爲原來的方式。

如果您想驗證對象的數據設置是否正確，則不能簡單地使用DOM檢查器，您需要實際檢查該特定元素的內容.data()。

For more information about the differences between .attr() and .data(), see my answer to this related question。

Answer 5

這實際上並不工作100％。你需要做的也是檢查你的表格是否使用輸入或電臺盒子或不是。

退房這一解決方案：

$(':input').each(function() { 
    $(this).data('initialValue', getValueForElement($(this))); 
}); 

fuunction getValueForElement(oObj) { 
    var sValue = oObj.val(); 
    if (oObj.is(":checkbox") || oObj.is(":radio")) { 
     sValue = oObj.is(":checked") ? oObj.val() : ' '; 
    } 
    return sValue; 
}