1つのページで複数のカウントダウン時間

Question

まず、jalali/persianの日付とカウントダウンのjQueryプラグインが動作しません。 exプラグインは2017/5/2のようなグレゴリオの日付にする必要がありますが、persian/jalaliの日付は1396/2/17です。

私は、日、時、分、秒を指定してmuliple datetimeを持っています。例：

3日13時間4分25秒

23日2hour 41分3秒...

私が持っている日と時間と分と別々秒、私はカウントダウンたい

彼らは（彼らの日付の数がdaynamicある）

ページのみで1日を持っているとき、私はこのコードを使用して、正常に動作1ページにさかのぼるため

HTML：

<div class="row"> 

@{TimeSpan span = (item.DiscountExpireDate - DateTime.Now);} 

    <ul class="countdown"> 
     <li> 
      <span class="seconds">@span.Seconds</span> 
     <p class="seconds_ref">ثانیه</p> 
     </li> 
     <li class="seperator">:</li> 
     <li> 
     <span class="minutes">@span.Minutes</span> 
      <p class="minutes_ref">دقیقه</p> 
      </li> 
      <li class="seperator">:</li> 

      <li> 
      <span class="hours">@span.Hours</span> 
      <p class="hours_ref">ساعت</p> 
      </li> 
      <li class="seperator"> </li> 
      <li> 
      <span class="days">@span.Days</span> 
     <p class="days_ref">روز</p> 
     </li> 
     </ul> 

</div> 

とJS

<script type="text/javascript">//for countdown 
    $(document) 
     .ready(function() { 
      var theDaysBox = $(".days"); 
      var theHoursBox = $(".hours"); 
      var theMinsBox = $(".minutes"); 
      var theSecsBox = $(".seconds"); 

       var refreshId = setInterval(function() { 
         var currentSeconds = theSecsBox.text(); 
         var currentMins = theMinsBox.text(); 
         var currentHours = theHoursBox.text(); 
         var currentDays = theDaysBox.text(); 

         if (currentSeconds == 0 && currentMins == 0 && currentHours == 0 && currentDays == 0) { 
          // if everything rusn out our timer is done!! 
          // do some exciting code in here when your countdown timer finishes 

         } else if (currentSeconds == 0 && currentMins == 0 && currentHours == 0) { 
          // if the seconds and minutes and hours run out we subtract 1 day 
          theDaysBox.html(currentDays - 1); 
          theHoursBox.html("23"); 
          theMinsBox.html("59"); 
          theSecsBox.html("59"); 
         } else if (currentSeconds == 0 && currentMins == 0) { 
          // if the seconds and minutes run out we need to subtract 1 hour 
          theHoursBox.html(currentHours - 1); 
          theMinsBox.html("59"); 
          theSecsBox.html("59"); 
         } else if (currentSeconds == 0) { 
          // if the seconds run out we need to subtract 1 minute 
          theMinsBox.html(currentMins - 1); 
          theSecsBox.html("59"); 
         } else { 
          theSecsBox.html(currentSeconds - 1); 
         } 
        }, 
        1000); 

     }); 
</script> 

が、私はページ上の複数の日付を持ってうまく機能し、数字が一緒に合計されていると思われていません。

https://jsfiddle.net/a7ucv468/1/

誰も私を助けることができますか？

Answer 1

あなただけのように各1のラッパー要素を識別する必要があります。

$('.countdown").each(function { 

は、その後、あなたの要素セレクタの前に$（この）.find（）を使用します。これは、カウントダウンの各インスタンスに関数をバインドします。現在、クラス「日」を探しているだけなので、見つかった最初のものを使用するか、他のバグが発生します。私はすぐに実例を書くつもりです。

数字はわかりませんが、ここでは個別に実行されているようです（デバッグにはタイムアウトを少なく設定してください）。https://jsfiddle.net/7nzcdhn3/