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