使用其属性之一设置文本框的值（jQuery）

Posted 2023-04-18

【中文标题】使用其属性之一设置文本框的值（jQuery）

【英文标题】：Setting the value of textboxes with one of their attributes (jQuery)

【发布时间】：2011-02-16 09:51:40

【问题描述】：

我有一堆输入文本框，它们的属性 ORIGINAL 设置为其初始值，这样当用户更改文本框值时，jQuery 可以突出显示已更改的项目（通过将文本框的当前值与 ORIGINAL 进行比较属性值）

我现在要做的是为用户提供一个按钮，他们可以单击该按钮以根据每个文本框的 ORIGINAL 属性的值将所有文本框恢复为其原始值。

例子

$('input[type=text]').val($(this).attr('original'));

以上不起作用，我不明白为什么。

【问题讨论】：

nit-picking：严格添加“原始”属性（如“从你的 a.. 中取出棒子”）说话会使 html 文档无效。在 hml5 中，您可以为此添加 data-* 属性，例如<input type="text" name="foo" data-original="bar" />.

【参考方案1】：

使用each:

$('input:text').each(function() 
    $(this).val($(this).attr('original')); // or this.value = $(this).attr('original');
);

您不能使用单行，因为$('input[type=text]').val() 将仅返回匹配集合中第一个元素的值。 $(this) 并不意味着您认为它在您的示例中的作用：

$('input[type=text]').val($(this).attr('original'));

它实际上是指当前范围。当您使用each 迭代集合时，jQuery 将调用它的回调并将迭代中的 current 元素分配为当前范围（$(this) 或 this）。

作为旁注，input:text 是一种更漂亮、更简洁的说法 input[type=text]。

【讨论】：

我会在每个循环中使用this.value = $(this).attr("original") || ""。无需通过其.val() 箍发送 jQuery 即可设置值。

@David - 我已将其作为代码注释放入。虽然我不会把$(this).val() 称为一个箍，但我承认this.value 更容易打字，也更容易看。

【参考方案2】：

类似这样的：

$('input[type=text]')each(function()$(this).val($(this).attr('original'));

【参考方案3】：

您可以在任何输入上调用 .defaultValue 以获取其原始值

【参考方案4】：

val 接受一个函数：

$('input:text').val(function () 
    return $(this).attr('original');
);