Помогите. Отображение таймера на продуктах товара с БД.(php, jquery)

Question

Выводиться таймер с записи БД, но одинаковый для всех карточек(По последней записи, как сделать так чтобы выводилось разное значение?) Использую плагин jquery.countdown

<ul class="example">
    <li><span class="days">00</span><p class="days_text">Дни</p></li>
    <li class="seperator">:</li>
    <li><span class="hours">00</span><p class="hours_text">Часы</p></li>
    <li class="seperator">:</li>
    <li><span class="minutes">00</span><p class="minutes_text">Минуты</p></li>
    <li class="seperator">:</li>
    <li><span class="seconds">00</span><p class="seconds_text">Секунды</p></li>
</ul>
<p class="timer"><?php echo $lot['finish'];?></p>
<p class="timerFinish"></p>

js

var timePlace = $(".timer").length;
var example = $(".example");
for( let i = 0; i < timePlace; i++) {
    var time = $(".timer");

    example.countdown({
    date: time[i].textContent
    }, function () {
    $(".timerFinish").html("Лот закрыт!");
    });
}

Answer 1

У вас ошибка в том, что вы в цикле всем контейнерам с выводом времени присваиваете текущее значение. Оно и отображается у всех. Должно быть как-то так:

var timePlace = $(".timer").length;

var products = $(".product");

$(".product").each(function(e,product){
  var timer_container = $(product).find('.example');
  timer_container.countdown('"'+$(product).find('.timer').html()+'"', function(event) {
    $(this).text(
      event.strftime('%D days %H:%M:%S')
    );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>

<div class="product">
  <ul class="example"></ul>
  <p class="timer">2020/7/10</p>
  <p class="timerFinish"></p>
</div>

<div class="product">
  <ul class="example"></ul>
  <p class="timer">2020/7/7</p>
  <p class="timerFinish"></p>
</div>

БЛОГ НА HUSL

Помогите. Отображение таймера на продуктах товара с БД.(php, jquery)

Ответы (1 шт):