使用 $(this) 和 this 的 jQuery 原型

Question

我正在使用 jQuery .prototype 构建一个 jQuery/javascript Web 应用程序。 在下面的代码中，我想更新原型全局值this.score，我必须bind(this) 才能完成这项工作。

如果不绑定this，我可以使用$(this) 到达btnElement 内的跨度，但绑定后这不再起作用。有没有像“这个”这样的解决方法？ ;)

showQuestion: function(question) {
   this.quiz.show();

   var btnElement = this.quiz.find('div');
   btnElement.on('click', function() {
        var btn = $(this).find('span');

        if (btn.hasClass('correct')) {
            btn.addClass('good');
            this.score += 1;
        } else {
            $('span.correct').addClass('good');
            btn.addClass('wrong');
        }
   }.bind(this));
}

Answer 1

你已经绑定了你的事件回调，所以它里面的this指的是它外面的this。这意味着您不能在 jQuery 事件处理程序（与事件相关的 DOM 元素）中使用 this 的通常含义。

三种处理方式：

1. 请改用btnElement，因为它很方便：

   showQuestion: function(question) {
      this.quiz.show();
   
      var btnElement = this.quiz.find('div');
      btnElement.on('click', function() {
           var btn = btnElement.find('span');   // <====
   
           if (btn.hasClass('correct')) {
               btn.addClass('good');
               this.score += 1;
           } else {
               $('span.correct').addClass('good');
               btn.addClass('wrong');
           }
      }.bind(this));
   }
   

2. 使用e.currentTarget，这与未绑定处理程序的this 相同（在这种情况下，您也可以使用e.delegateTarget，因为它不是委托处理程序，因此它是相同的值):

   showQuestion: function(question) {
      this.quiz.show();
   
      var btnElement = this.quiz.find('div');
      btnElement.on('click', function(e) {              // <====
           var btn = $(e.currentTarget).find('span');   // <====
   
           if (btn.hasClass('correct')) {
               btn.addClass('good');
               this.score += 1;
           } else {
               $('span.correct').addClass('good');
               btn.addClass('wrong');
           }
      }.bind(this));
   }
   

   我没有推荐e.target，因为它完全是一回事：e.target 是事件发生的元素； this 是您让事件挂钩的元素。所以e.target 可能是您测验的div 的后代元素。

3. 不要绑定事件处理程序，而是将this 的引用存储在事件处理程序关闭的变量中：

   showQuestion: function(question) {
      var self = this;                        // <====
   
      self.quiz.show();
   
      var btnElement = this.quiz.find('div');
      btnElement.on('click', function() {
           var btn = $(this).find('span');
   
           if (btn.hasClass('correct')) {
               btn.addClass('good');
               self.score += 1;                // <====
           } else {
               $('span.correct').addClass('good');
               btn.addClass('wrong');
           }
      });                                      // <====
   }
   

Answer 2

一种方法是不在点击处理程序之外绑定并使用对this的引用

showQuestion: function(question) {
   this.quiz.show();

   var btnElement = this.quiz.find('div');
   var self = this; // create a reference to this
   btnElement.on('click', function() {
        var btn = $(this).find('span'); // you will still be able to find the span which is inside the btnElement

        if (btn.hasClass('correct')) {
            btn.addClass('good');
            self.score += 1; // you will still be able to refer this which is reference as self outside
        } else {
            $('span.correct').addClass('good');
            btn.addClass('wrong');
        }
   });
}

其他方法是向bind发送参数（除了其他答案中的所有其他选项）

showQuestion: function(question) {
   this.quiz.show();

   var btnElement = this.quiz.find('div');
   btnElement.on('click', function(event, btnElement) { // 
        var btn = btnElement.find('span'); 
        if (btn.hasClass('correct')) {
            btn.addClass('good');
            this.score += 1; 
        } else {
            $('span.correct').addClass('good');
            btn.addClass('wrong');
        }
   }.bind(this, btnElement));
}

这也很有效，只是将按钮引用发送到它自己的点击处理程序有点奇怪。