jQuery在具有相同类名称的页面上多次翻转时钟不起作用

我已使用jQuery Flipclock Plugin来显示翻转时钟。当我和一个只在我的页面上使用过的课程一起使用时，它工作得很好。但是当我尝试在具有相同类名的页面上多次使用翻转时钟时，它不起作用。您可以看到fiddle link，我曾尝试多次使用它，但无法正常工作。那么有人能告诉我如何在具有相同类名的页面上多次使用这个插件吗？jQuery在具有相同类名称的页面上多次翻转时钟不起作用

此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>

来源

2015-08-18 NewUser

我认为问题是，该插件不支持每个呼叫的多个实例（因为它返回一个时钟例如，它可以在只返回一个时钟一旦）。

因此，解决办法是遍历每个元素，并为每一个呼叫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

来源

2015-08-18 07:48:27

如果你有你的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(); 
});

来源

2015-08-18 07:50:23 Daniel

当您使用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 = []声明移到全局可用的位置。

来源

2015-08-18 07:56:11 Taintedmedialtd

jQuery在具有相同类名称的页面上多次翻转时钟不起作用

回答

相关问题