jQuery：在自定义jQuery函数的回调函数中使用$（this）

Question

这是自定义的jQuery函数

$.fn.wider = function(callback) {  
    $(this).animate({width: 500}, function() {
        callback();
    });
};

调用函数

$('#div').wider(function() {
    console.log('div resizing done');

    // $(this) refers to window instead of $('#div')
    $(this).css({background: '#f00'});
});

那么如何在下面的点击功能中使用$（this）？

$('#div').click(function() {
    console.log('div clicked');

    // $(this) refers to $('#div')
    $(this).css({background: '#f00'});
});

Answer 1

使用Function.apply。

$.fn.wider = function(callback) {  
    $(this).animate({width: 500}, function() {
        if (typeof callback === 'function') {
            callback.apply(this); // <- here
        }
    });
};

稍微更一般的实施：

$.fn.wider = function(callback) {
    var self = this;
    $(this).animate({width: 500}, function() {
        if (typeof callback === 'function') {
            callback.apply(self);
        }
    });
};