Javascript 意外的jquery模块行为

我正在尝试构建一个插件，该插件将有助于简化客户端上巨大数据的显示，但该插件没有按预期工作

下面是一个示例：

HTML

在这个示例中，我希望当用户单击第一个div时，它将在控制台div1中写入，当用户单击第二个div时，div2将在控制台上写入，但是，控制台正在写入div2

---

我的错误是什么？为什么它不能按预期工作？

需要修复您的

上下文

范围。 只需将第一部分更改为：

var context = $(this);
  var methods = {
    init: function() {
      context.on('click', function() {
        console.log(context.attr('id'))
      })
    }
  }

为此：

  var methods = {
    init: function() {
      var context = $(this);
      context.on('click', function() {
        console.log(context.attr('id'))
      })
    }
  }

还要删除此行：

context=$（这个）

---

我还更新了JSFIDLE。

因此，这是一个非常简单的开始，您试图做什么。看看你怎么想

(function($) {
    $.fn.sample = function () {
        //'this' is already a jQuery object since sample is a function of $.fn
        //if this does not contain any elements, there's nothing to do
        if (!this.length) return;

        this.each(function(){
            //wrap the iterated element
            var $element = $(this);

            $element.on('click', function () {
                console.log($element.attr('id'));
            });
        });
    }
})(jQuery);

$(function() {
    $('.test').sample();
});

---

var-context=$（这个）；嗯？”这就是生活，不是吗？那（打算）做什么？只有一个

上下文
变量。第二次调用该方法会覆盖第一次设置的内容。@Juhana我还不擅长jQuery模块。我在c#背景下工作，如何实现每个样本像c#类一样存储自己的变量（封装）？为了解释我的观点，为什么我不能得到两个不同的对象，每个对象都有自己的变量和方法，但对于同一类“样本”，如上所述，上下文是该函数外部的全局变量，所以它不是“它自己的”。另外，您没有向sample（）传递它似乎期望的参数。另外，由于您基于最初的上下文构造methods.init，这是完全无效的，因此也不会像您预期的那样工作。在我的项目中，有许多函数依赖于上下文变量来绘制东西等等。我想我将无法从其他函数访问上下文对象。如果您有多个类似于
init
的函数，那么您可以在每个函数中创建一个上下文变量。
  var methods = {
    init: function() {
      var context = $(this);
      context.on('click', function() {
        console.log(context.attr('id'))
      })
    }
  }

(function($) {
    $.fn.sample = function () {
        //'this' is already a jQuery object since sample is a function of $.fn
        //if this does not contain any elements, there's nothing to do
        if (!this.length) return;

        this.each(function(){
            //wrap the iterated element
            var $element = $(this);

            $element.on('click', function () {
                console.log($element.attr('id'));
            });
        });
    }
})(jQuery);

$(function() {
    $('.test').sample();
});