jQuery插件公共方法应用于多个元素时不起作用

Question

我之前发布了类似的问题，但将其标记为重复。 但是， 这篇引用的文章没有回答我的问题，因此我将在我的示例中使用上述文章的解决方案再试一次。

本文提供的解决方案会产生与我以前相同的问题：当有多个元素时，我无法调用该插件的任何公共方法。

由于没有提供工作示例，因此让我们从文章提供的代码开始：

(function($){

     $.fn.myPlugin = function(options) {
          // support multiple elements
          if (this.length > 1){
              this.each(function() { $(this).myPlugin(options) });
              return this;
          }

          // private variables
          var pOne = '';
          var pTwo = '';
          // ...

          // private methods
          var foo = function() {
              // do something ...
          }
          // ...

          // public methods        
          this.initialize = function() {
              // do something ...
              return this;
          };

          this.bar = function() {
              // do something ...
          };
          return this.initialize();
      }
 })(jQuery);

我喜欢内部循环，以便将其应用于元素的每个实例，但是我觉得重复的“返回此”是多余的。 我认为，如果我们删除其中的每个插件，那么该插件的工作原理将完全相同。 但是，为了争辩，我将把它们留在我的工作示例中。

正如您在此jsfiddle示例中看到的那样 ，当只有一个元素时，它可以正常工作。 公共方法运行良好。

但是，如果要像在这里一样注释其他4个元素，则会在控制台中引发错误：“未定义不是函数”。 当然，这是有道理的，因为我试图在对单个元素上的所有元素的引用上运行public方法。

好吧，然后我使用.eq（0）仅在此处的元素的第一个实例上运行该方法，但是在控制台中却得到了完全相同的错误。

那么，为什么在单个元素上调用public方法不起作用？ 这是范围问题吗？

请指教。 谢谢！

Answer 1

好的，我想我已经回答了我自己的问题。 问题是我没有将jQuery插件应用于DOM元素。 我将其应用于jQuery元素。 因此，如果我将jQuery插件应用于像$ element或$（'。element'）之类的jQuery元素，则由于范围相同，因此可以运行任何公共方法。 但是，如果我要以不同的方式引用它，例如$ parentelement.eq（0），则我使用的是差异引用，该引用没有将插件应用到它，因此自然地，它不会具有定义的方法。 我认为我的想法正确。 仍然有点动摇。 也许其他人可以更好地解释它。

尽管如此，尽管以上代码在技术上可以正常工作，但公共方法在jQuery插件上并不实际。 我建议改为使用自定义事件来使jQuery插件执行某些操作。 像这样：

 (function($) {
     $.fn.extend({
         myTestPlugin: function() {

             if (this.length > 1) {
                 this.each(function() { $(this).myTestPlugin(); });
             }

             this.done = function() {
                 $(this).html('Done!');
             };

             var alsoDone = function() {
                 $(this).html('Also done!');
             };

             this.html('Replace me!');
             this.on('alsoDone', alsoDone);
         }
     });
 })(jQuery);

这是一个示例，其中我使用触发器使插件在单个元素上执行某些操作，此方法可以正常工作，但该方法仍会按预期失败。

希望这对其他有类似问题的人有所帮助。