Question

我有一个用户选择的背景颜色：

var _back = "#FF0000";

为什么不设置输入字段的背景颜色：

$("#input").val( _back ).css("background-color",$(this).val());

当这样做时：

$("#input").val( _back ).css("background-color",$("#input").val());

但是，如果我引入.each（）

$("#input").val(_back).each(function(){$(this).css("background-color",$(this).val()) })

Answer 1

您已经拥有变量中的值。只需在css方法中添加：

$("#input").val( _back ).css("background-color",  _back);

这样做会更好的另一个原因是你不需要jQuery来启动方法.val()，这可以节省一些开销。

它不起作用的原因是因为css方法中的$(this)不存在（好吧，它确实存在，但它没有指向你想要的元素）。 each或animate等函数设置this值，css不。这可能是因为在css中使用this没有太多理由

Answer 2

因为$(this)指的是你所在的函数，但在css()函数的末尾链接val()函数不会嵌套函数，所以没有{{1对象引用。

你也可以通过写：

来简化它

this

Answer 3

您的“此”行相当于以下两行：

var that = this;
$("#input").val( _back ).css("background-color",$(that).val());

如果您处于this不是输入的上下文中，$(this).val()不会引用您期望的值。

Answer 4

可接受的答案是一种合理的解决方法，但不能解决您的问题陈述。

在线问题

$("#input").val( _back ).css("background-color",$(this).val());

是$(this)在调用之前被评估。 css()。这就是调用函数之前总是发生的情况：它的所有参数都将被预先评估。 $(this)是在与$("#input")相同的上下文中，在相同的上下文中进行评估的，并且彼此都不了解。

在此行

$("#input").val(_back).each(function(){$(this).css("background-color",$(this).val()) })

两者$(this)都是您创建并传递给each()的匿名函数的源代码的一部分。并且each()本身会调用此函数，因此它有机会设置this。

“好”消息是：css()也吃了功能。该API允许：

.css( propertyName, value )
.css( propertyName, function )

如果您向其提供函数，则css()会调用该函数，类似于each()，但只会调用一次，并使用其返回值。

您可以使用以下方法来解决问题：

$("#input").val(_back).css("background-color", function(){return $(this).val();});

注意：您不能在此处使用箭头功能() => $(this).val()。这是箭头功能和“常规”功能之间最重要的区别：没有办法赋予任何this箭头功能。他们总是从词汇的角度出发，这会引入我们在这里试图解决的问题...