多个倒计时 jQuery 并根据剩余时间组织它们

Question

我想创建一个通过点击激活多个倒计时的网站，其中一些时间不同，其他时间相同。我需要根据剩余时间来组织它们。当一个完成我需要return它到他原来的倒计时值，所以你可以再次点击。

为了更好地理解（我不需要效果，我制作它们只是为了示例）：http://i.imgur.com/lvcwbqm.gif

每个倒计时独立于其他倒计时。

HTML

<div class="element" id="el1"><b>Elm 1</b> <span class="timeout">10</span> segundos</div>
<div class="element" id="el2"><b>Elm 2</b> <span class="timeout">100</span> segundos</div>
<div class="element" id="el3"><b>Elm 3</b> <span class="timeout">5</span> segundos</div>

Javascript

function timer(selector) {
    var 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 {
            clearInterval(interval);
        }
    }, 1000);
}


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

虽然每个倒计时都有不同的 ID（el1、el2、el3 ...），但我不知道要检测哪一个倒计时结束，因此我不知道如何添加 class它开始和结束。

关于ubication，我该怎么办？具有绝对位置的每个位置都有不同的 classes?

我知道很多，但有些帮助会很棒。非常感谢。

Answer 1

Agusitn 你的代码大约有 95% 是正确的，但是你将 .text() 设置为 sec variable，即 0 或 -1

让我们稍微更改一下代码

首先让我们取 span DOM 元素的实际值。

    var actualTime  = $('span.timeout').html(); 
   console.log("the actual value when click is " + actualTime)

稍后在 if statement 我们检查实际跨度文本的时间 equal to 0

else if($(this).find('span').text() <= 0) {
            console.log(sec)
            var text =  self.find('span.timeout').text(actualTime);
            console.log(actualTime)
            clearInterval(interval);
        }

当 .text() 为 === to 0 时，我们设置 actualTime variable 返回实际时间。

这里是JsFiddle

多个倒计时 jQuery 并根据剩余时间组织它们

Multiple countdowns jQuery and organize them depending the time left

html

javascript

jquery

countdown