6

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

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

问题是上面没有将input字段的初始值存储在数据属性initial-value中。未创建属性。

以下确实有效：

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

我不能在方法中使用 jQuery$(this)运算符吗？.data()如果是这样，我还能做什么？

4

5 回答 5

8

为此，您将需要一些迭代，并且.each还会this为您设置正确的参考：

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

小提琴

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

此外，this.value它会做得很好，并提供比它更好$(this).val()的性能 - 缺点是当您的select元素具有返回具有所选值的数组而仅返回第一个值的multiple属性时。.val().value

不过，您可以通过元素的defaultValue属性获取初始值。例如：

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

小提琴

请注意，此方法不适用于select元素。这将需要遍历 select 的option元素并检查它们的defaultSelected属性，但在这种情况下，使用前一种解决方案更容易。

于 2013-04-01T14:22:07.440 回答
4

在这种情况下，this指的是全局对象，因为没有上下文。

此外，你不需要这个。只是.attr("value")会给你初始值;）

于 2013-04-01T14:18:53.523 回答
1

这样的事情怎么样

$('input').each(function(){$(this).data('initial-value',$(this).val());})
于 2013-04-01T14:25:00.523 回答
1

对于初学者，您提供的代码将不起作用，因为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]保留原始状态的属性，因此当 aform被重置时，输入可以返回到它们的原始状态。

您还提到：

问题是上面没有将input字段的初始值存储在数据属性initial-value中。未创建属性。

当您用于访问元素上的数据时，如果存在属性.data()，它将从属性中提取信息。这对于初始化元素上的数据非常有用。[data-*][data-*]

当您使用.data(key, value)将数据与元素关联时，它将值作为属性存储在元素上；它不会更新属性的值。没有一种方法可以序列化实例化的对象，例如new Foo可以将其反序列化为最初的方式。

如果您想验证对象的数据是否设置正确，您不能简单地使用 DOM 检查器，您需要实际检查该.data()特定元素的内容。

有关和之间差异的更多信息.attr()，.data()请参阅我对这个相关问题的回答。

于 2013-04-01T14:29:12.220 回答
1

这实际上并不是 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;
}
于 2013-12-10T10:46:20.063 回答