单页多次倒计时

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

Answer 2

Javascript和HTML是朋友。 当你发现js代码中发生了一些奇怪的事情时，首先验证html。 在你的情况下，如果你坚持“ul”，使用“ul-li-div”结构; 否则使用“div-div”或“nav-div”或“section-div”（如果适用）