Question

我想创建一个通过点击激活多个倒计时的网站，其中一些具有不同的时间，其他则相同。我需要根据剩下的时间来组织它们。完成后我需要将其恢复到原来的倒计时值，这样您就可以再次点击。

为了更好地理解（我不需要效果，我仅为示例制作了它们）：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 ......）但我不知道检测到哪一个已完成，因此我不知道如何在开始和结束时添加一个类。< / p>

关于ubication，我该怎么办？位置绝对的每个位置的不同类？

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

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并根据剩余时间组织它们

1 个答案: