jQuery chaining ()

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()函数的末尾并不会嵌套函数，因此没有可以引用的this对象。

您还可以通过以下方式简化它：

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

Answer 3

被接受的答案是一个合理的解决方案，但并不能解决您的问题陈述。

线上的问题

$("#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。他们总是把它从他们的词汇周围，这会带来我们正在试图解决的问题。