Question

我之前发布了类似的问题，但它被标记为重复。但是，this referenced article没有回答我的问题，所以我再次尝试这一点，这次使用我的例子中的所述文章的解决方案。

本文提供的解决方案创建了我之前遇到的相同问题：当存在多个元素时，我无法调用该插件的任何公共方法。

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

(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);

我爱内部循环，以便它应用于元素的每个实例，但我觉得重复＆＃34;返回这个＆＃34;是多余的。我想如果我们删除它们中的每一个，这个插件将完全相同。但是，为了争论，我将把它们留在我的工作范例中。

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

但是，如果我要回复其他4个元素，如here，它会在控制台中抛出错误：＆＃34; undefined不是函数＆＃34;。当然，这是有道理的，因为我试图在对不是单个元素的所有元素的引用上运行公共方法。

那么，我使用.eq（0）仅在元素here的第一个实例上运行该方法，但我在控制台中得到完全相同的错误。

那么，为什么不调用单个元素的公共方法呢？这是一个范围问题吗？

请指教。谢谢！

Answer 1

好的，所以我想我已经回答了我自己的问题。问题是我没有将jQuery插件应用于DOM元素。我正在将它应用于jQuery元素。所以，如果我将jQuery插件应用于jQuery元素，引用为$ element或$（'。element'），那么我可以运行任何公共方法，因为范围是相同的。但是，如果我以不同的方式引用它，比如说$ 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);

Here是一个示例，我使用触发器使插件对单个元素执行某些操作，但该方法仍然按预期失败。

我希望这可以帮助其他有类似问题的人。

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

1 个答案: