为什么这个 jQuery one-liner 不能做它应该做的事情？答案

【问题标题】：Why won't this jQuery one-liner do what it is supposed to?为什么这个 jQuery one-liner 不能做它应该做的事情？
【发布时间】：2011-07-14 15:22:13
【问题描述】：

我正在编写一些表单 UI 编码并编写了这个 jQuery one-liner：

$('input[type=text]').val($(this).attr('default-value'));

目的是为每个输入文本字段提供其在属性中提供的默认值。

有什么建议吗？ TIA

【问题讨论】：

【解决方案1】：

$('input[type=text]').each(function () {
    $(this).val($(this).attr('default-value'));
});

val() 调用中的this 并未引用该元素，而只是您运行此单行代码的函数的上下文。

另外，在定义自定义属性时，您可能会考虑更早地投资 HTML5 并使用“data-*”约定：在 HTML5 中，定义自定义属性是合法的，只要它们以“data-”为前缀即可。所以，我会使用类似“data-default”而不是“default-value”。

【讨论】：

【解决方案2】：

试试：

$('input[type=text]').each(function() {
   $(this).val($(this).attr('default-value'));
});

你的问题是 $(this) 没有在你使用它的上下文中定义。

【讨论】：

【解决方案3】：

它不起作用，因为this 的上下文不是您所期望的。试试这个：

$('input[type=text]').each(function(){
    var $this = $(this);
    $this.val($this.attr('default-value'));
});

【讨论】：

【解决方案4】：

我想你想要：

$('input[type=text]').val(function(i,e) { return $(e).attr('default-value'); } );

【讨论】：

【解决方案5】：

因为您没有正确引用该元素...

您立即将输入的 val 分配给 $(this) 的当前范围，而不是您正在获取的元素。

$(":text").each(function() { $(this).val($(this).attr('default-value')); });

【讨论】：