jQuery OOP元素参数

jQuery OOP element parameters

本文关键字：参数 元素 OOP jQuery      更新时间：2023-09-26

我想使用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元素，所以这不是一个解决方案。

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

或者，有没有人能告诉我怎样才能使这个结构看起来像

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

?

我需要我的代码工作与多个元素在一个单一的页面

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

您可以尝试这样做(未经测试):

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
}

这种方法的新情况是，您可以在Slider实例中引用this.elem。您将不得不调整一些代码以引用Slider原型中的this.elem来工作，但这应该让您开始。

相关文章：