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)中的$(this).hide()不是$('.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构造函数进行了两次冗余调用：

    $.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"

jQuery $（this）在一个插件函数中

3 个答案: