javascript - jQuery OOP 元素参数

Question

我想使用 oop 创建一个 jquery slider 。这是我的代码结构:

var photoGallery = new Slider();

function Slider(){ this.init(); }

Slider.prototype = {
  el : {
    nav : $('.slideshowNav', this.main),
    navItems  : $('.items', this.nav),
    main  : $('.slideshow')
  }
  ,init: function(){
    // some code here
  }//init

  // rest of functions here
}

我的问题是我有两个 <div class="slideshow">在同一页面中，根据这种情况，我的代码是错误的。

我知道我可以将参数传递给 init()我所有的问题都会飞走，但我使用 this.el元素也在其他函数中，所以这不是解决方案。

我想知道如何向 this.el 添加另一个元素来自 Slider()参数(我知道，现在没有参数)

或者，有人知道我如何制作看起来像这样的结构吗

$('.slideshow').each(...)

?

我需要我的代码在单个页面上处理多个元素

Answer 1

这里有多少jquery plugins开始:

$.fn.myplugin = function(opts) {
    // Let each closure has its own options
    var myplugin = new Myplugin(opts);
    return this.each(myplugin);
};

function Myplugin(opts) {}

这样，人们就可以像这样调用您的代码:

$('.slideshow').myplugin();

并且每个元素都会被单独处理。 this.el 将能够在您的每个实例中轻松调用而不会出现问题。