Question

我正在使用jCounter在我的网站上为拍卖创建一个倒计时时钟。

为了测试它，我将这个计数器放在页脚上：

$('[class^="countdown"]').jCounter({
    twoDigits: 'on',customDuration: 9999});

这适用于设置单个计时器。问题是，我在同一页上有多个拍卖（可以使用LiquidSlider在幻灯片中导航），我想根据拍卖结束的日期为每个帖子开始一个不同的倒计时时钟。我怎样才能做到这一点？有没有办法为循环内的每个帖子启动一个计数器？因为它只在我在页眉或页脚中设置时才有效。

Answer 1

如果您的解决方案不起作用，您可以尝试.each() jQuery方法：

$('[class^="countdown"]').each(function () {
    $(this).jCounter({
       twoDigits: 'on',
       customDuration: 9999
    });
});

拥有以下HTML：

<ul class="countdown" data-duration="120">...</ul>
<ul class="countdown" data-duration="60">...</ul>

您将能够：

$('.countdown').each(function () {
    $(this).jCounter({
       twoDigits: 'on',
       customDuration: $(this).attr('data-duration')
    });
});

$(this).attr('data-duration')将返回每个 data-duration的{{1}}属性值。

Answer 2

如果你的html来自服务器并且你知道每个倒计时的持续时间，那么你可以添加一个数据属性，其持续时间和引用通过jQuery。例如：

HTML：

<div class=“countdown” data-duration=“60”>…</div>

然后你通过jQuery引用属性，如下所示：

$(".countdown").jCounter({
  twoDigits: 'on',
  customDuration: $('.countdown').attr('data-duration'),
  fallback: function() { console.log("count finished!") }
});

这是一个jsFiddle：http://jsfiddle.net/GwFjV/

如何在具有不同结束日期的同一页面上添加多个计数器

2 个答案: