Question

我想存储input字段的初始数据（以便稍后能够检查这些初始值）。因此，我在页面加载时使用以下代码段：

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

问题在于上述内容不会将input字段的初始值存储在数据属性initial-value中。该属性未创建。

以下工作正常：

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

我不能在$(this)方法中使用jQuery .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()更好的性能 - 缺点是当select元素具有multiple属性时.val()返回包含所选值的数组，而.value仅返回第一个值。

但是，您可以通过元素的defaultValue属性获取初始值。 E.g：

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

Fiddle

请注意，此方法不适用于select元素。这需要迭代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());
});

当然，这可能不会做你想要的，因为它会设置每个输入元素来存储第一个输入元素的初始值（{ {1}}返回第一个匹配元素的值。

因此，要更新代码以适用于每个元素，您可以使用：

.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)等实例化对象序列化，使其可以按照原来的方式进行反序列化。

如果要验证对象的数据设置是否正确，则不能简单地使用DOM检查器，您需要实际检查{01}的内容是否属于该特定元素。

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

jQuery .data（）无法使用$（this）

5 个答案: