Question

我用jQuery Flipclock Plugin来显示flipclock。当我使用一个只在我的页面中一次的类时，它工作正常。但是当我试图在具有相同类名的页面上多次使用翻转时钟时，它不起作用。你可以看到我试图多次使用它的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

我认为问题是，插件不支持每次调用多个实例（因为它返回一个时钟实例，它一次只能返回一个时钟）。

所以解决方案是循环遍历每个元素，并为每个元素调用{/ 1}}插件，如

Flipclock

演示：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();
    };
});

现在，如果你想操纵任何时钟，你可以通过clock [int]访问它们。您可能希望将var clock = []声明移到文档就绪调用之外，以使其在全局范围内可用。

jQuery Flipclock在具有相同类名的页面上多次无效

3 个答案: