Jquery Countdowntimer显示错误的多个跨度的相同计时器

Question

我有一张游戏细节表。我想为每场比赛增加一个倒计时器。

我正在使用jquery-countdownTimer插件

我的Html：

<span class="given_date" data-gamestart="2016/3/11 15:30"></span>
<span class="given_date" data-gamestart="2016/3/13 18:00"></span>
<span class="given_date" data-gamestart="2016/3/15 17:45"></span>
<span class="given_date" data-gamestart="2016/3/22 19:45"></span>

我用这个插件来倒计时。

我的js：

$('.given_date').countdowntimer({
            dateAndTime : "2016/3/10 17:05"
});

A jsFiddle example

我的问题是，即使我为每个范围提供不同的时间，所有计时器都显示相同的值和倒计时同步

为什么每个跨度都没有根据我提供的值显示自己的计时器？

Answer 1

最好的方法是使用jQuery＆＃39; span遍历.each()并在该循环中设置倒数计时器。像这样：

$('.given_date').each(function() {
    $(this).countdowntimer({
        dateAndTime : this.getAttribute("data-gamestart")
    });
});

Answer 2

您的问题是您的元素没有ids。

此插件使用以下代码设置计时器，然后显示其值。请注意window['regexpMatchFormat_' + $this.attr('id')]。这使用每个元素的id来创建一个唯一的全局变量来跟踪定时器。如果你的元素没有id，你最终会反复覆盖你的第一个计时器

//Code for starting the timers.
        if (options.regexpMatchFormat != undefined && options.regexpReplaceWith != undefined && options.timeSeparator == undefined) {
            window['regexpMatchFormat_' + $this.attr('id')] = options.regexpMatchFormat;
            window['regexpReplaceWith_' + $this.attr('id')] = options.regexpReplaceWith;
        }



//Function for displaying the timer.
function html($this, content) {
    var processedContent = content;
    if (typeof window['regexpMatchFormat_' + $this.attr('id')] !== 'undefined' &&
            typeof window['regexpReplaceWith_' + $this.attr('id')] !== 'undefined') {
        var regexp = new RegExp(window['regexpMatchFormat_' + $this.attr('id')]);
        processedContent = content.replace(regexp,
                window['regexpReplaceWith_' + $this.attr('id')]);
    }
    $this.html(processedContent);
}

这就是为什么你应该总是链接到你正在使用的插件;）