jQuery的：使用$（本）自定義的jQuery函數

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