Question

我正在尝试在匿名函数中使用$(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();
    })

})

为什么$(this)成为#document？

修改
对于那些阅读本文并说“这与播放并发动画无关”的人来说，你是对的。该问题的解决方案是使用queue: false

Answer 1

$(function(){})相当于$(document).ready(function(){})，显然会获得document的上下文。

我建议完全删除$(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准备就绪之前不太可能触发事件。

Answer 2

因为：

$(function(){

相当于：

$(document).ready(function(){

将准备好的处理程序附加到document。在该处理程序中，this是document。

Answer 3

此：

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

与：

同义

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

这与看起来像这样的anonymous function不同：

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

Answer 4

在外部功能中执行此操作...

var self = this;

然后在子函数中使用self而不是this

Answer 5

首先缓存第一个。

$('#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();
    })

})

Answer 6

这是Javascript上下文范围的预期。 this指的是调用问题的上下文。例如：

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();
    })

})

使用jQuery.proxy进行跨浏览：

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

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

})

使用Function.prototype.bind的现代浏览器：

$('#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();
    }).bind(this))

})

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

6 个答案: