Преобразовать скрипт для работы с несколькими экземплярами

Question

Позволяет увидеть этот сценарий, что это просто карусельного

$script = { 
    init: function(){ 
     this.heros(3000); 
    }, 
    heros: function (time) { 
     var t; 
     var $hero = $('.hero'); 
     var $images = $('.hero > div'); 
     $hero.data('current', 0); 
     var $bullets = $('<div>').addClass('bullets'); 
     for (var i = 0; i<$images.length; i++) { 
      var $item = $('<span>'); 
      $item.on('click', function() { 
       clearTimeout(t); 
       play($(this).index()); 
      }); 
      if(i==0) { $item.addClass('active') } 
      $bullets.append($item); 
     } 
     var play = function (current) { 
      if(current==undefined) { 
      current = $hero.data('current'); 
      } 
      var nextMargin; 
      if ((current+1) == $images.length) { 
       nextMargin = 0 ; 
       $hero.data('current',0); 
      } else { 
       nextMargin = (current + 1)*100; 
       $hero.data('current', (current + 1)); 
      } 

      $images.eq(0).css('marginLeft', -nextMargin + '%'); 
      $bullets.find('span').eq($hero.data('current')).addClass('active').siblings().removeClass('active'); 
      clearTimeout(t); 
      t = setTimeout(play, time); 
     } 
     $hero.append($bullets); 
     t = setTimeout(play, time); 
    }, 
} 

Дело в том, что он прекрасно работает, но только если есть только один .hero элемент .. если есть кратного пули смешиваются, и он не уважает .length

Я знаю, что этот вариант следует переписать снова, но кто-нибудь из вас видит быстрое исправление, которое сделает его многоразовым?

Один скрипку: https://jsfiddle.net/6z8n5pnq/ Многократная скрипку: https://jsfiddle.net/6z8n5pnq/1/

-EDIT-

Я пробовал:

Определение предыдущей функции, которая вызывается INIT

preheros: function(time) { 
     var self = this; 
     $('.heros').each(function(){ 
      self.heros($(this), time); 
     }); 
}, 

И редактирование Начало heros:

heros: function ($hero, time) { 
     var t; 
     /*var $hero = $('.hero');*/ 
     var $images = $hero.find('>div'); 

, но не успех ...

любая идея?

-EDIT-

GOD, это $('.hero').each не $('.heros').each это работает!

Answer 1

Самый простой способ сделать это - изолировать контекст для каждого компонента .hero с помощью функции $(selector).each. Небольшая корректировка вашей скрипки https://jsfiddle.net/6z8n5pnq/2/

function apply($hero, time){ 
    var t;  
    var $images = $hero.children('div'); 
    //all your logic here... 
} 

$script = { 
    init: function() { 
     this.heros(3000); 
    }, 
    heros: function (time) { 
     $('.hero').each(function(){ 
      apply($(this), time); 
     }); 
    }, 
}