Параметры элемента jQuery OOP

Question

Я хочу создать ползунок jquery с помощью oop. Это структура моего кода:

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 будет легко вызван в каждом из ваших экземпляров без проблем.

Answer 2

Вы можете попробовать что-то вроде этого (непроверенные):

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 insta которые вы можете сослаться. Вам нужно будет адаптировать часть вашего кода, чтобы ссылаться на this.elem на ваш прототип Slider, но это должно вас начать.