Javascript jQuery插件：意外行为-上下文为；这"；可能是丢了

我已经编写了一个非常基本的jQuery插件，它应该记录单击按钮的值

虽然它基本上可以工作，但不幸的是，它为页面上的每个按钮记录了相同的值。因此，如果页面上有三个按钮，则单击的按钮的值将记录三次

插件代码如下所示：

(function($) {

  $.fn.content = function() {
    return this.each(function() {
      $('button').click(function() {
        console.log($(this).html());
      });
    });
  };

}(jQuery));


$('button').content();

---

虽然我现在很困惑，但我很确定这与

每个
循环中的
这个
的上下文有关，但我无法真正理解它。
这里有几个问题。
this
函数中的
fn.content
实际上是组合的jQuery对象。该对象是
$（'button'）
，因此它将包含此时DOM中有多少个按钮

然后迭代该集合，对于该集合中的每个项目，再次显式地将单击处理程序附加到
$（'button'）
组。不幸的是，这意味着您已经为该组分配了n次单击事件处理程序，其中n是有多少个按钮。3个按钮，3个事件；6个按钮，6个事件

为了不这样做，只需将click处理程序分配给原始jQuery对象

(function($) {

    $.fn.content = function() {
        return this.click(function() {
            console.log($(this).html());
        });
    });

}(jQuery));

请记住，
单击
将在内部调用
。每个
，在我们的示例中，
这个
已经是
$（'button'）

有关创建jQuery插件的更多信息，请参阅我在
上的文章这里有几个问题。
this
函数中的
fn.content
实际上是组合的jQuery对象。该对象是
$（'button'）
，因此它将包含此时DOM中有多少个按钮

然后迭代该集合，对于该集合中的每个项目，再次显式地将单击处理程序附加到
$（'button'）
组。不幸的是，这意味着您已经为该组分配了n次单击事件处理程序，其中n是有多少个按钮。3个按钮，3个事件；6个按钮，6个事件

为了不这样做，只需将click处理程序分配给原始jQuery对象

(function($) {

    $.fn.content = function() {
        return this.click(function() {
            console.log($(this).html());
        });
    });

}(jQuery));

请记住，
单击
将在内部调用
。每个
，在我们的示例中，
这个
已经是
$（'button'）

有关创建jQuery插件的更多信息，请参阅我在
上的文章。我不确定您实际需要访问哪个范围，但是
此
的范围对于每个函数都是不同的，包括您创建的匿名函数。要访问外部作用域的
此
，请尝试以下操作：

function foo() {
    this.someVal = 1;
    var that = this;
    function bar() {
        console.log(that.someVal); // you have access to foo's this
    } 
}

我不确定您实际需要访问哪个范围，但
此
的范围对于每个函数都是不同的，包括您创建的匿名函数。要访问外部作用域的
此
，请尝试以下操作：

function foo() {
    this.someVal = 1;
    var that = this;
    function bar() {
        console.log(that.someVal); // you have access to foo's this
    } 
}

这个问题与
这个
或范围没有任何关系。这个问题与
这个
或范围没有任何关系。哈哈，在我有机会之前你就写了它！另外还有一把小提琴：哈哈，我还没来得及写呢！另外还有一个问题：你甚至没有在
每个
回调中使用
这个
？！您甚至没有在
每个
回调中使用
这个
？！