Функция слайдера Javascript — как объективировать селекторы?

В настоящее время я работаю над проектом, где нужен был настраиваемый слайдер, и я быстро взял аккуратно выглядящий учебник в Интернете и ушел, и статически все работает отлично.

Теперь я хочу иметь возможность разместить несколько слайдеров на своей странице, и поэтому мне нужно динамически добавлять элементы управления, а не просто выбирать определенный слайдер с помощью jquery, как я сделал ниже.

Это мой код с добавленными комментариями, чтобы объяснить, чего я пытаюсь достичь:

var Slider = function() { this.initialize.apply(this, arguments) };
Slider.prototype = {

initialize: function(slider) {
this.ul = slider.children[2];
this.li = this.ul.children;
this.nav = slider.children[3]; //Why cant i use .append on this element?

// make <ul> as large as all <li>’s
this.ul.style.width = (100 * this.li.length) + '%';

// set width of the li's
for(i = 0; i < this.li.length; i++) {
  this.li[i].style.width = (100 / this.li.length) + '%';
  $(".slider-nav").append( '<div class="slider-dot"></div>'); //Want to make it a this.nav or something similar instead of an external selector
  //console.log(this.nav);
}

this.currentIndex = 0;
},

goTo: function(index) {
if (index < 0 || index > this.li.length - 1)
  return;

// move <ul> left
this.ul.style.left = '-' + (100 * index) + '%';

this.currentIndex = index
},

goToPrev: function() {
  this.goTo(this.currentIndex - 1)
},

goToNext: function() {
  this.goTo(this.currentIndex + 1)
}}

var sliders = [];
$('.slider').each(function() {
sliders.push(new Slider(this));
});

//Find a way to implement theese 2 within the slider function, how to find out what position in the array a slider has?
$(".prev-btn").click(function() {
 sliders[0].goToPrev();
});

$(".next-btn").click(function() {
 sliders[0].goToNext();});

Разметка для ползунка выглядит так: http://puu.sh/hAUH1/a865792137.png


javascript slider jquery
person Martin Hobert    schedule 04.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Мне удалось это сделать, определив это как еще один var

var sliderEle = this;

Тогда я мог бы назвать это так:

$(this.prev).click(function(e) {
  e.preventDefault();
  sliderEle.goToPrev();
});

с предыдущим и следующим, определенными следующим образом:

this.prev = slider.children[0];
this.next = slider.children[1];
person Martin Hobert    schedule 04.05.2015