1

我想使用 oop 创建一个 jquery 滑块。这是我的代码的结构：

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

?

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

4

2 回答 2

3

这是启动了多少个 jquery 插件：

$.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将能够在您的每个实例中轻松调用，没有问题。

于 2013-05-25T13:33:12.427 回答
1

您可以尝试这样的事情（未经测试）：

var galleries = [];

$('.slideshow').each(function(index, elem) {
    galleries.push(new Slider(elem));
});

然后将您的Slider实现更改为如下所示：

function Slider(elem) {
    this.elem = elem;
    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
}

这种方法的新功能是，this.elem您的实例内部有一个Slider可以引用的实例。您将不得不调整您的一些代码以this.elem在您的Slider原型中引用才能工作，但这应该可以帮助您入门。

于 2013-05-25T13:20:26.007 回答