在具有相同类名的页面上多次出现jQuery Flipclock不起作用
在具有相同类名的页面上多次出现jQuery Flipclock不起作用
提问于 2015-08-18 15:46:30
我已经用jQuery Flipclock Plugin来展示flipclock了。当我在我的页面中使用了一个只有一次的类时，它工作得很好。但是，当我尝试在具有相同类名的页面上多次使用翻转时钟时，它不起作用。您可以看到我多次尝试使用的fiddle link，但都不起作用。那么，谁能告诉我如何在一个具有相同类名的页面上多次使用这个插件？
这个翻转时钟的代码如下所示
<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>回答 3
Stack Overflow用户
发布于 2015-08-18 15:48:28
我认为问题是，插件不支持每次调用多个实例(因为它返回一个时钟实例，所以它一次只能返回一个时钟)。
因此解决方案是遍历每个元素，并为每个元素调用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
Stack Overflow用户
发布于 2015-08-18 15:50:24
如果同一个类在DOM上多次出现，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();
});Stack Overflow用户
发布于 2015-08-18 15:56:12
当您为一个类使用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();
};
});现在，如果您想要操作任何时钟，您可以通过clockint访问它们。您可能希望将var clock = []声明移到文档就绪调用之外，以使其全局可用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32066510
复制相关文章
相似问题
腾讯云开发者
