Question

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

我有span .time内的时间（以秒为单位），以及我如何获得倒计时的时间，但是我不知道如何节省原始时间，所以当一个人被点击时，我会得到＃34;原始时间＆＃34;始终是第一个span .time。

这是我的代码：http://jsfiddle.net/arglab/m19aojmu/16/

的Javascript

function timer(selector) {
    var description = ["seconds","hour"]
    var self = $(selector);
    var sec = parseInt(self.find('span.timeout').text());
    console.log(sec)
    order++;
    var actualTime  = $('span.timeout').html();  
    console.log("Original time " + actualTime)
    self.addClass('selec').css('order',order+'');
    var interval = setInterval(function() {
        sec--;
        console.log(sec)
        if (sec >= 0) {
            var hours = Math.floor(sec / 3600);
            var min = Math.floor((sec - (hours*3600)) / 60);
            var seconds = Math.floor(sec % 60);

            var value = seconds;
    if(min > 0) {
        if(min == 1) {
           value = " minute " + value;
        } else {
           value = " minutes " + value;
        }
        value = min + value;
    }

    if(hours > 0) {
        if(hours == 1) {
           value = " hour " + value;
        } else {
           value = " hours " + value;
        }
        value = hours + value;
    }    
    self.find('span.timeout').text(value);

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

            var text =  self.find('span.timeout').text(actualTime);
            console.log(actualTime)
            clearInterval(interval);
        }
        $('.element').each(function(){
            if($(this).find('span').text() == 0){
                $(this).removeClass('selec');
                $(this).css('order','0');
            }
        });     
    }, 1000);

}

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

HTML 的

<div id="container">
    <div class="element" id="el1"><b>element 1</b> <span class="timeout">1000</span> seconds (1000)</div>
    <div class="element" id="el2"><b>element 2</b> <span class="timeout">5</span> seconds (5)</div>
    <div class="element" id="el3"><b>element 3</b> <span class="timeout">10</span> seconds (10)</div>
    <div class="element" id="el4"><b>element 4</b> <span class="timeout">15</span> seconds (15)</div>
    <div class="element" id="el5"><b>element 5</b> <span class="timeout">10</span> seconds (10)</div>
 </div>

正如你所看到的，如果你点击10秒倒计时，当它完成时他的时间不是10秒（应该是），但在这种情况下，1000（第一span .time）< / p>

我该怎么办？感谢

Answer 1

您需要在计时器功能中使用self。在以下代码中找到评论，

function timer(selector) {
    var description = ["seconds", "hour"]
    var self = $(selector);
    var sec = parseInt(self.find('span.timeout').text());
    console.log(sec)
    order++;
    var actualTime = self.find('span.timeout').html(); // use self.find here

    console.log("Original time " + actualTime)
    self.addClass('selec').css('order', order + '');
    var interval = setInterval(function () {
        sec--;
        console.log(sec)
        if (sec >= 0) {
            var hours = Math.floor(sec / 3600);
            var min = Math.floor((sec - (hours * 3600)) / 60);
            var seconds = Math.floor(sec % 60);
            var value = seconds;
            if (min > 0) {
                if (min == 1) {
                    value = " minute " + value;
                } else {
                    value = " minutes " + value;
                }
                value = min + value;
            }
            if (hours > 0) {
                if (hours == 1) {
                    value = " hour " + value;
                } else {
                    value = " hours " + value;
                }
                value = hours + value;
            }
            self.find('span.timeout').text(value);
            // remove the below redundant line
            //self.find('span.timeout').text(value);
        } else if (self.find('span').text() <= 0) { //use self not this
            console.log(sec);
            var text = self.find('span.timeout').text(actualTime);
            console.log(actualTime)
            clearInterval(interval);
        }
        $('.element').each(function () {
            if ($(this).find('span').text() == 0) {
                $(this).removeClass('selec');
                $(this).css('order', '0');
            }
        });
    }, 1000);
}

Live Demo

Answer 2

注册onclick处理程序时，应将另一个对象传递给计时器函数：

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

从跨度中获取不同的值

2 个答案: