jQuery $ (this) bên trong một plugin function

Question

Tôi có plugin này jQuery:

$.fn.touchBind = function(func) { 
    $(this).live('touchmove', function() { 
    $(this).addClass('dragged'); 
    }); 

    $(this).live('touchend', function() { 
    if ($(this).hasClass('dragged') == false) { 
     func(); 
    } 
    }); 

    return this; 
} 

và gọi nó như vậy:

$('.the-element').touchBind(function() { 
    $(this).hide(); 
}); 

Vấn đề của tôi là $(this) trong $(this).hide() không đề cập đến $('.the-element'), nhưng thay vì DOMWindow. Có cách nào tôi có thể thực hiện công việc này không?

Answer 1

Thay đổi func();-func.call(this); hoặc $.proxy(func, this)();.

Bạn cũng có thể sử dụng apply() (không cần thiết khi call() bộ quần áo) hoặc bind() (hỗ trợ trình duyệt bị hạn chế, $.proxy() thực chất là giống nhau).

Answer 2

Làm thế nào về:

$('.the-element').touchBind(function() { 
    $('.the-element').hide(); 
}); 

Answer 3

@Alex là chính xác, tất cả những gì bạn cần là thay thế func(); bằng func.call(this); và nó sẽ hoạt động. Tuy nhiên tôi muốn chỉ ra rằng bạn đang làm cho 2 cuộc gọi không cần thiết để jQuery constructor trong plugin của bạn:

$.fn.touchBind = function(func) { 

    //this already refers to a jQuery object 
     this.live('touchmove', function() { 

     //this refers to a DOM element inside here 
     $(this).addClass('dragged'); 
     }); 

     //this already refers to a jQuery object 
     this.live('touchend', function() { 

     //this refers to a DOM element inside here 
     if ($(this).hasClass('dragged') == false) { 
      func.call(this); 
     } 
     }); 

     return this; 
    } 

Bạn có thể xác minh nó như thế này:

$.fn.whatIsThis = function(){ 
return "jquery" in this ? "jQuery object" : "Something else"; 
}; 

Và sau đó:

console.log($("div").whatIsThis()); 
//"jQuery object"