đếm ngược nhiều lần trên một trang

Question

Dưới đây là mã html để đếm ngược. Tôi đang sử dụng plugin jquery.countdown.min.js.

<ul id="example"> 
<li><span class="days">00</span><p class="days_text">Days</p></li> 
     <li class="seperator">:</li> 
     <li><span class="hours">00</span><p class="hours_text">Hours</p></li> 
     <li class="seperator">:</li> 
    <li><span class="minutes">00</span><p class="minutes_text">Minutes</p></li> 
     <li class="seperator">:</li> 
    <li><span class="seconds">00</span><p class="seconds_text">Seconds</p></li> 
    </ul> 

    <div id= "count" data-text="01/01/2016 05:06:59"></div> 

và đây là mã javascript.

<script type="text/javascript"> 
    var val1 = $('#count').data('text'); 

     $('#example').countdown({ 
      date: val1, 
      offset: 0, 
      day: 'Day', 
      days: 'Days' 
     }, function() { 
      alert('Done!'); 
     }); 
    </script> 

Nó hoạt động tốt và cho tôi kết quả mong muốn. Giới hạn là tôi chỉ có thể sử dụng một đồng hồ đếm ngược trên mỗi trang. Nếu tôi muốn sử dụng nhiều trên cùng một trang thì tôi phải thêm nhiều mã javascript.

Dưới đây là kịch bản.

<ul id="example"> 
     <div data-countdown="01/01/2016 05:06:59"></div> 
     <div data-countdown="01/01/2017"></div> 
     <div data-countdown="01/01/2018"></div> 
     <div data-countdown="01/01/2020"></div> 
     </ul> 

Tôi đã thử mã bên dưới nhưng không hoạt động.

<script type="text/javascript"> 
    $('[data-countdown]').each(function() { 
    var $this = $(this),finalDate = $(this).data('countdown'); 
     $this.countdown({ 
      date: finalDate, 
      offset: 0, 
      day: 'Day', 
      days: 'Days' 
     }, function() { 
      alert('Done!'); 

     }); 
     }); 
    </script> 

Answer 1

Cập nhật:

JSFiddle

<div id="example1" data-countdown="01/01/2016 05:06:59"></div> 
    <div id="example2" data-countdown="01/01/2017"></div> 
    <div id="example3" data-countdown="01/01/2018"></div> 
    <div id="example4" data-countdown="01/01/2020"></div> 

$(function(){ 
    $('[data-countdown]').each(function() { 
     var $this = $(this), finalDate = $(this).data('countdown'); 
     $this.countdown(finalDate, function(event) { 
     $this.html(event.strftime('%D days %H:%M:%S'))}).on('finish.countdown', function() { 
      alert("Finish"); 
      }); 
    }); 
}); 

Answer 2

javascript và html bè. Khi bạn tìm thấy một cái gì đó kỳ lạ xảy ra trong mã js, xác nhận html đầu tiên. Trong trường hợp của bạn, nếu bạn dính vào "ul", hãy sử dụng cấu trúc "ul — li ​​— div"; nếu không, hãy sử dụng "div — div" hoặc "nav — div" hoặc "section — div" nếu có thể áp dụng