1

我对 jquery/javascript 倒计时有一点问题，我希望你能帮助我。

所以，我有计时器功能，它有一个参数，称为选择器（jquery 选择器）..

function timer(selector) {
    self = $(selector);     
    var sec = parseInt(self.find('span.timeout').text());

    var interval = setInterval(function() {
    sec--;
    if (sec >= 0) {
        self.find('span.timeout').text(sec);
    } else {
        setInterval(interval);
    }
    }, 1000);

}

在，html 我有这样的东西。

<div class="element" id="el1"><span class="timeout">10</span></div>
<div class="element" id="el2"><span class="timeout">10</span></div>

具有相同类和不同 id 的多个元素

函数的用法是这样的：

$("body").on('click', '.element', function() {
timer(this);
});

在第一次点击它工作得很好，计时器倒计时。但是当我单击具有相同类的第二个 div 时，第一个计数器停止，第二个计数器从前一秒开始。

那么，如何使用 js/jquery 在同一页面上进行多个倒计时，这样我就可以单击这两个元素并且两个计时器都可以正常工作？

演示：http: //jsfiddle.net/zKTkj/

4

1 回答 1

1
  • 你忘了用self声明var。结果，self变成了全局变量。创建第二个计时器时，您正在覆盖此全局（“共享”）变量。因此，从那时起，两个计时器同时输出到第二个元素，从而导致故障。
  • 你可能的意思是clearInterval(interval)。

http://jsfiddle.net/zKTkj/1/

于 2012-06-04T14:54:37.023 回答