jQuery 插件子函数中的无限递归

Question

我编写了以下 jQuery 插件：

(function($){
    $.fn.imageSlide = function(options){
      $(this).imageSlide.nextSlide();
      console.log("imageslide");
    };

    $.fn.imageSlide.nextSlide = function(){
      console.log("nextslide");
      $this = $(this);
    };

})(jQuery);

一些背景：

我想要一个图像滑块插件，用于淡入淡出背景（出于性能原因，我无法使用 超大 插件）。我想向用户公开几个函数：imageSlide插件“构造函数”和其他几个函数，例如imageSlide.nextSlide和imageSlide.previousSlide，以使用户能够执行这些操作来自插件外部。

imageSlide 函数需要调用 imageSlide.nextSlide 函数，以滑入（或淡入）第一个图像。

问题：

似乎行 $this = $(this); 触发了 imageSlide.nextSlide 函数的无限递归。

• 为什么会发生这种情况？
• 似乎 $.fn.imageSlide.nextSlide = function(){}; 不是在 jQuery 插件中公开另一个函数的正确方法。我该怎么做？

Answer 1

我不确定到底是什么导致了错误，但没有必要将所有静态方法都放在 jQuery 原型中。

尝试使用以下方法公开插件：

(function($) {

// The constructor of your plugin:
var imageSlide = function(elems, options) {
    this.elems = elems; // the targets from the jQuery selector
    this.options = options;
};

// the public inherited methods:
imageSlide.prototype = {
    nextSlide: function() {
        console.log('nextSlide called');
    }
};

// extending the jQuery prototype and returning only one instance:
$.fn.imageSlide = function(options) {
    return new imageSlide(this, options);
};

})(jQuery);

现在您可以调用插件及其方法，如下所示：

var myGallery = $('#gallery').imageSlide();
myGallery.nextSlide();