Jquery 在子匿名函数中使用$（this）

我试图在匿名函数中使用

$（this）

，以便可以同时调用两个动画。在将动画放入函数之前，它工作正常，但在将它们放入函数

$（此）

之后，似乎超出了范围

$('#chat_input input').focusin(function(event){
    console.log(this); //prints correct input element

    $(function(){
        console.log(this); //prints "#document"
        $(this).transition({width: 840, duration: 200, paddingLeft: 60});
        $('.target').fadeIn();
    })

})

为什么

$（此）

成为

#文档

编辑：

---

对于那些读到这篇文章并说“这与播放并发动画无关”的人来说，你是对的。该问题的解决方案是在外部函数中使用

队列：false

执行此操作

var self = this;

---

然后在子函数中使用

self

而不是外部函数中的

this

执行以下操作

var self = this;

然后在子函数中使用

self

而不是

，这个
$（function（）{}）
相当于
$（document）.ready（function（）{}）
，它显然获得了
文档的上下文

我建议完全删除
$（function（）{
），因为在事件内部几乎不需要它

$('#chat_input input').focusin(function(event){
    console.log(this); //prints correct input element    
    console.log(this); //prints correct input element (duh)
    $(this).transition({width: 840, duration: 200, paddingLeft: 60});
    $('.target').fadeIn();    
});

您需要在事件中等待dom准备就绪的唯一原因是，如果您在文档准备就绪之前直接触发所述事件。除非您的dom大得离谱，否则用户不太可能在dom准备就绪之前触发事件。
$（function（）{}）
相当于
$（document）.ready（function（）{}）
，它显然获得了
文档的上下文

我建议完全删除
$（function（）{
），因为在事件内部几乎不需要它

$('#chat_input input').focusin(function(event){
    console.log(this); //prints correct input element    
    console.log(this); //prints correct input element (duh)
    $(this).transition({width: 840, duration: 200, paddingLeft: 60});
    $('.target').fadeIn();    
});

您需要在事件中等待dom准备就绪的唯一原因是，如果您在文档准备就绪之前直接触发所述事件。除非您的dom大得离谱，否则用户不太可能在dom准备就绪之前触发事件。
只需缓存第一个事件即可

$('#chat_input input').focusin(function(event){
    console.log(this); //prints correct input element
    var $this = $(this);

    $(function(){
        console.log($this); //prints "#document"
        $this.transition({width: 840, duration: 200, paddingLeft: 60});
        $('.target').fadeIn();
    })

})

只需缓存此文件中的第一个文件

$('#chat_input input').focusin(function(event){
    console.log(this); //prints correct input element
    var $this = $(this);

    $(function(){
        console.log($this); //prints "#document"
        $this.transition({width: 840, duration: 200, paddingLeft: 60});
        $('.target').fadeIn();
    })

})

因为：

$(function(){

相当于：

$(document).ready(function(){

将就绪处理程序附加到
文档
。在该处理程序中，
此
是
文档
，因为：

$(function(){

相当于：

$(document).ready(function(){

将准备好的处理程序附加到
文档
。在该处理程序中，
此
是Javascript上下文作用域所需的
文档
。
此
引用调用问题的上下文。示例：

var myfunc = function(){
    console.log(this);
};

var a = ['a'];
var b = ['b'];
var c = ['c'];

a.myfunc = myfunc; // ["a", myfunc: function]
b.myfunc = myfunc; // ["b", myfunc: function]
c.myfunc = myfunc; // ["c", myfunc: function]

a.myfunc();
b.myfunc();
c.myfunc();

有几种解决方法：

跨浏览器：

$('#chat_input input').focusin(function(event){
    console.log(this); //prints correct input element

    var self = this;

    $(function(){
        console.log(self);
        $(self).transition({width: 840, duration: 200, paddingLeft: 60});
        $('.target').fadeIn();
    })

})

跨浏览器使用：

现代浏览器使用：

这是Javascript上下文范围所期望的。
此
引用调用问题的上下文。示例：

var myfunc = function(){
    console.log(this);
};

var a = ['a'];
var b = ['b'];
var c = ['c'];

a.myfunc = myfunc; // ["a", myfunc: function]
b.myfunc = myfunc; // ["b", myfunc: function]
c.myfunc = myfunc; // ["c", myfunc: function]

a.myfunc();
b.myfunc();
c.myfunc();

有几种解决方法：

跨浏览器：

$('#chat_input input').focusin(function(event){
    console.log(this); //prints correct input element

    var self = this;

    $(function(){
        console.log(self);
        $(self).transition({width: 840, duration: 200, paddingLeft: 60});
        $('.target').fadeIn();
    })

})

跨浏览器使用：

现代浏览器使用：

这：

同义词：

$(document).ready(function(){
    //...
});

这不同于看起来像这样的：

(function(){
    // ...
})();

这：

同义词：

$(document).ready(function(){
    //...
});

这不同于看起来像这样的：

(function(){
    // ...
})();

$（function（）{}
相当于
$（document）.ready（）
，因此
#document
只是一个想法，但是发布基于“缓存变量”的答案的人能重新阅读这个问题吗？基本上是“为什么会发生这种情况”而不是“我如何才能绕过它”。
$（function（）{/code>相当于
$（document）.ready（）
，因此，
#文档
只是一个想法，但是发布基于“缓存变量”的答案的人是否可以重新阅读这个问题？基本上是“为什么会发生这种情况”而不是“我如何绕过它”