Получение различных значений из диапазона

Question

Я хочу создать веб-сайт с несколькими обратными отсчетами, активируемыми щелчком, некоторые из них имеют разное время, другие одинаковые. Когда я закончил, мне нужно вернуть его в исходное значение обратного отсчета , так что вы сможете щелкнуть его снова.

У меня есть время (в секундах) внутри span .time, и именно так я получаю время для обратного отсчета, однако я не знаю, как сохранить исходное время, поэтому, когда его нажимают, я получаю как «оригинальное время "всегда первое 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 секунд отсчет времени, когда он заканчивает свое время isn 't 10 секунд (как и должно быть), но в этом случае 1000 (первый span .time)

Что мне делать? Благодаря

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

Когда registereing обработчик OnClick, вы должны передать другой объект функции таймера:

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