代码之家 › 专栏 › 技术社区 › Scharrels

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

infinite-loop jquery-plugins jquery

Scharrels · 技术社区 · 14 年前

我写了以下jQuery插件:

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

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

})(jQuery);

我想要一个图像滑块插件,交叉淡入背景(由于性能原因,我不能使用 Supersized 插件)。我想向用户公开几个函数:imageSlide插件“constructor”和其他几个函数,例如。 imageSlide.nextSlide 和 imageSlide.previousSlide ,使用户能够从插件外部执行这些操作。

这个 imageSlide imageSlide.nextSlide function

问题:

看来这条线 $this = $(this); 触发的无限递归 图像幻灯片.nextSlide 功能。

为什么会这样?
看来 $.fn.imageSlide.nextSlide = function(){}; 不是在jQuery插件中公开另一个函数的正确方法。我该怎么做?

1 回复 | 直到 14 年前

David Hellsing 14 年前

我不确定是什么导致了这个错误,但是没有必要将所有静态方法都放在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();

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前