单页多次倒计时

Question

以下是倒计时的html代码.我正在使用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>

这是javascript代码.

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

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

它工作正常,给我所需的输出.限制是我每页只能使用一个倒数计时器.如果我想在同一页面上使用多个,那么我必须添加多个javascript代码.

以下是场景.

<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>

我试过下面的代码,但它不起作用.

<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

更新：

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"); 
          });
     });
 });