0

我使用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>
4

3 回答 3

0

如果您的 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-18T07:50:23.750 回答
0

当您对一个类使用 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 = [] 声明移到文档就绪调用之外，以使其全局可用。

于 2015-08-18T07:56:11.907 回答
0

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

所以解决方案是遍历每个元素，并为每个元素调用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();
    })
});

演示：小提琴

于 2015-08-18T07:48:27.993 回答