HTML數據屬性不工作時，在倒計時腳本

Question

我用這個腳本：http://keith-wood.name/countdown.html 我有一個以上的「數據時就像你在代碼中看到屬性在同一頁面上。

第一數據 - 時間屬性是11月17日，第二個給出的數據 - 時間屬性18 11：

<!-- 1st block -->        
<div class="kf_event_list_wrap"> 
          <div class="row"> 
           <div class="col-lg-6 col-md-5 col-sm-5"> 
            <!--EVENT LIST THUMB Start--> 
            <div class="kf_event_list_thumb"> 
             <figure> 
              <img src="extra-images/event_1.jpg" alt=""/> 
              <div id="defaultCountdown" data-time="nov 17, 2016 12:00:00" class="defaultCountdown"></div> 
             </figure> 
            </div> 
            <!--EVENT LIST THUMB END--> 
           </div> 

           <div class="col-lg-6 col-md-7 col-sm-7"> 
            <!--EVENT LIST DES Start--> 
            <div class="kf_event_list_des"> 
             <h4><a href="#">University <span>Convocation</span></a></h4> 
             <p>Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisie tiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam.</p> 
             <ul class="kf_event_list_links"> 
              <li><i class="fa fa-user"></i><a href="#">John Doe</a></li> 
              <li><i class="fa fa-calendar"></i><a href="#">Saturday 10:00 AM</a></li> 
             </ul> 
            </div> 
            <!--EVENT LIST DES END--> 
           </div> 
          </div> 
         </div> 




<!-- 2th block --> 
<div class="kf_event_list_wrap"> 
          <div class="row"> 
           <div class="col-lg-6 col-md-5 col-sm-5"> 
            <!--EVENT LIST THUMB Start--> 
            <div class="kf_event_list_thumb"> 
             <figure> 
              <img src="extra-images/event_1.jpg" alt=""/> 
              <div id="defaultCountdown" data-time="nov 18, 2016 12:00:00" class="defaultCountdown"></div> 
             </figure> 
            </div> 
            <!--EVENT LIST THUMB END--> 
           </div> 

           <div class="col-lg-6 col-md-7 col-sm-7"> 
            <!--EVENT LIST DES Start--> 
            <div class="kf_event_list_des"> 
             <h4><a href="#">University <span>Convocation</span></a></h4> 
             <p>Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisie tiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam.</p> 
             <ul class="kf_event_list_links"> 
              <li><i class="fa fa-user"></i><a href="#">John Doe</a></li> 
              <li><i class="fa fa-calendar"></i><a href="#">Saturday 10:00 AM</a></li> 
             </ul> 
            </div> 
            <!--EVENT LIST DES END--> 
           </div> 
          </div> 
         </div> 

但現在，JavaScript代碼：

if($('.defaultCountdown').length){ 
     var date1 = $('#defaultCountdown').data('time'); 
     var date = new Date(date1); 
     $('.defaultCountdown').countdown({ until: date}); 
    } 

現在我有一個定時器顯示相同倒計時的問題。也許是因爲這兩個區塊的id相同？

我認爲有什麼問題我的JavaScript和我搜索了別的東西，但它也不能正常工作。我不知道這是在正確的方向：

if($('.defaultCountdown').length){ 
$('[data-time]').each(function() { 
    var $this = $('.defaultCountdown'), finalDate = $(this).data('time'); 
    $this.countdown(finalDate, function(event) { 

    var date = new Date(finalDate); 
    $('.defaultCountdown').countdown({ until: date}); 
    }); 
}); 
} 

Answer 1

我認爲這將工作：

$('[data-time]').each(function() { 
    var $this = $(this), finalDate = new Date($(this).data('time')); 
    $this.countdown({ until: finalDate}); 
    // or all in one line 
    // $(this).countdown({ until: new Date($(this).data('time'))}); 
}); 

我認爲你已經嘗試過什麼問題是，你使用：

​​3210

相反的：

$this.countdown({ until: date}); 

你用defautlCountdown類countdown設置所有的元素，而不是將其設置爲當前元素$this的。