我有一个用户选择的背景颜色：
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()) })
【问题讨论】：
标签： javascript jquery chaining
您已经拥有变量中的值。只需在 css 方法中添加即可：
$("#input").val( _back ).css("background-color", _back);
这样做会更好的另一个原因是，您不需要 jQuery 来启动方法 .val()，这样可以节省一些开销。
它不起作用的原因是因为 css 方法中的$(this) 不存在（嗯，它确实存在，但它没有指向您想要的元素）。 each 或 animate 之类的函数设置 this 值，css 没有。这可能是因为没有太多理由在 css 中使用 this
【讨论】：
$(this) 是什么意思在 css 方法中不存在？ css 方法可能无法为this 提供它自己的上下文，但它仍然存在并且可以查询。 $("#input").val('test-value').css("background-color", console.log($(this))); 它不会将您的背景颜色设置为任何东西，但它会执行并记录 window（如果在顶层），因为 $(this) 确实存在 - fiddle。
this 存在，但不是 TS 预期的方式。一些 jQuery 函数将this“重置”为当前元素（如在每个循环中）。 .css() 不这样做，this 值没有更改为输入，但仍保留在（在这种情况下）window
css() 方法被设计成一个静态方法，使用this 引用方法的所有者是不可能的。
css() 方法确实 设置了this，但根本看不到$(this)...，因为它是在调用css() 之前评估的。为了给css() 影响这个this 的机会，传递一个函数来调用它！见my answer。
因为$(this)指的是你所在的函数，但是在val()函数的末尾链接css()函数并没有嵌套函数，所以没有this对象可以引用。
你也可以写成：
$("#input").css("background-color", _back);
【讨论】：
接受的答案是一种合理的解决方法，但不能解决您的问题陈述。
线路中的问题
$("#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。他们总是从他们的词汇环境中获取它，这将引入我们在这里试图解决的问题......
【讨论】：