1

我正在尝试$(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

4

6 回答 6

4

$(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 准备好之前触发事件。

于 2013-07-22T20:38:12.640 回答
1

这个：

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

是同义词：

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

这与看起来像这样的匿名函数不同：

(function(){
    // ...
})();
于 2013-07-22T20:40:01.910 回答
1

因为这：

$(function(){

相当于：

$(document).ready(function(){

将准备好的处理程序附加到document. 在该处理程序内部，this是document.

于 2013-07-22T20:39:01.920 回答
0

在外部函数中执行此操作...

var self = this;

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

于 2013-07-22T20:38:03.150 回答
0

只需缓存第一个 this。

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

})
于 2013-07-22T20:38:20.920 回答
0

这是 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))

})
于 2013-07-22T20:39:45.550 回答