multiple countdown time in one page

Question

first of all , i work with jalali/persian date and countdown jQuery plugins does not work for me. for ex plugins must enter gregorian date like 2017/5/2 but persian/jalali date is 1396/2/17 .

i have muliple datetime with specify day , hour , min and sec . ex:

3 days 13 hour 4min 25 sec

23 days 2hour 41 min 3 sec ...

i have days and hour and min and sec separate,

i want count down for they dates in one page (number of they dates are daynamic)

i use this code and work fine when only have one date in page

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>

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

but when i have multiple dates on page does not work well , and it seems that numbers are sum together.

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

anyone can help me ?

Answer 1

You just need to identify a wrapper element for each one like:

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

Then use $(this).find() in front of your element selectors. That will bind the functions to each instance of the countdown. Currently it is just looking for the class "days" so it'll just use the first one it finds, or cause other bugs. I'll write a working example soon.

I'm not sure about the numbers but they seem to be running independently here (set the timeout to less for debugging) https://jsfiddle.net/7nzcdhn3/