插件函数内的 jQuery $(this)

Question

我有这个 jQuery 插件：

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

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

  return this;
}

并像这样调用它：

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

我的问题是 $(this).hide() 中的 $(this) 不引用 $('.the-element')，而是 DOMWindow。有什么办法可以让我完成这项工作吗？

Answer 1

将 func(); 更改为 func.call(this); 或 $.proxy(func, this)();。

您还可以使用 apply() （当 call() 适合时不需要）或 bind() （有限的浏览器支持，$ .proxy() 本质上做同样的事情）。

Answer 2

怎么样：

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

Answer 3

@Alex 是正确的，您只需将 func(); 替换为 func.call(this); 就可以了。不过我想指出的是，您在插件中对 jQuery 构造函数进行了 2 次冗余调用：

    $.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;
    }

您可以像这样验证它：

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

然后：

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