jQuery Flipclock несколько раз на странице с тем же именем класса не работает

Question

Я использовал jQuery Flipclock Plugin, чтобы показать флипчак. он отлично работает, когда я использовал с классом, который только один раз на моей странице. Но когда я пытаюсь использовать флип-часы на несколько раз на странице с тем же именем класса, это не работает. Вы можете увидеть fiddle link, где я пытался использовать его несколько раз и его не работает. Так может кто-нибудь сказать мне, как использовать этот плагин несколько раз на странице с тем же именем класса?

Код для этого flipclock выглядит следующим образом

<div class="clock" style="margin:2em;"></div> 
    <div class="message"></div> 

    <script type="text/javascript"> 
     var clock; 

     $(document).ready(function() { 
      var clock; 

      clock = $('.clock').FlipClock({ 
       clockFace: 'DailyCounter', 
       autoStart: false, 
       callbacks: { 
        stop: function() { 
         $('.message').html('The clock has stopped!') 
        } 
       } 
      }); 

      clock.setTime(220880); 
      clock.setCountdown(true); 
      clock.start(); 

     }); 
    </script> 

Answer 1

Я думаю, что проблема в том, плагин не поддерживает несколько экземпляров за вызов (так как он возвращает экземпляр часов, он может возвращать только один такт на один раз).

Таким образом, решение Перебери каждый элемент и для каждого одного звонка Flipclock плагина как

$(document).ready(function() { 

    $('.clock').each(function() { 
     var clock; 

     clock = $(this).FlipClock({ 
      clockFace: 'DailyCounter', 
      autoStart: false, 
      callbacks: { 
       stop: function() { 
        $('.message').html('The clock has stopped!') 
       } 
      } 
     }); 

     clock.setTime(220880); 
     clock.setCountdown(true); 
     clock.start(); 
    }) 
}); 

Дем: Fiddle

Answer 2

Если у вас есть несколько экземпляров одного и тот же класс на ваш DOM Jquery возвратов (jquery) массив элементов jquery. Для того, чтобы манипулировать каждый вхождение существует метод петли each():

$(".clock").each(function(){ 
    var clock; 
    clock = $('.clock').FlipClock({ 
     clockFace: 'DailyCounter', 
     autoStart: false, 
     callbacks: { 
      stop: function() { 
       $('.message').html('The clock has stopped!') 
      } 
     } 
    }); 
    clock.setTime(220880); 
    clock.setCountdown(true); 
    clock.start(); 
}); 

Answer 3

При использовании селектора JQuery для класса будет выбрать только один элемент. Лучше всего использовать функцию jQuerys .each() для их прокрутки. Сделать переменную часы массив и присвоить каждому .clock в массив так:

$(document).ready(function() { 
    var clock = []; 
    var i = 0; 
    $('.clock').each(function(){ 
     clock[i] = $(this).FlipClock({ 
      clockFace: 'DailyCounter', 
      autoStart: false, 
      callbacks: { 
       stop: function() { 
        $('.message').html('The clock has stopped!') 
       } 
      } 
     }); 
     i++; 
    }); 
    for (var j = 0; j < $(".clock").length; j++) {  
     clock[j].setTime(220880); 
     clock[j].setCountdown(true); 
     clock[j].start(); 
    }; 
}); 

Теперь, если вы хотите управлять любой из часов вы можете получить доступ к ним через часы [INT]. Возможно, вам захочется переместить объявление var clock = [] за пределы готового вызова документа, чтобы сделать его доступным по всему миру.