列表中的倒数计时器为每个列表项提供相同的计时器结果 rails

Question

我正在尝试创建一个倒数计时器，出于某种原因，class 会让这些倒数中的每一个都独一无二。我所有的倒计时都是一样的，尽管它们都不一样due_dates。

在我的 console.log(reservation.duedate) 中我得到了不同的 due_dates 这是正确的并且应该是什么。
倒计时在js倒计时函数中对每个列表使用due_date的第一个结果。这是不正确的；每个列表项的每个倒计时必须是单独的。

这是reservations_controller中的your_essays方法：

@reservations_pending = user.reservations.where("turned_in = ?", false).where("completed = ?", false).where("due_date >= ?", DateTime.now).order(created_at: :desc).page(params[:page_pending]).per_page(3)

your_essays.html.erb:

<div id="content-load-more-pending">
 <%= render 'your_essays_pending', reservations_pending: @reservations_pending %>
</div>

这是 your_essays.html.erb 中称为 _your_essays_completed.html.erb

的部分

<% reservations_pending.each do |reservation| %>

<div style="color:blue;" class="countdown-class"></div>
<script type="text/javascript">
$(".countdown-class")
.countdown("<%= reservation.due_date %>", function(event) {
$(this).text(
event.strftime('%D days %H:%M:%S')
);
});

console.log("<%= reservation.due_date %>");
</script> 

<% end %>

这里是 console.log(事件) 和 console.log("<%= reservation.due_date %>");

Answer 1

每次执行循环时，都会将 .countdown-class 的每个实例重置为新的截止日期。这应该可以解释为什么它们都具有最后一个的价值。

有几种方法可以解决这个问题。例如，您可以使用每个预订的 id 并将其添加到 class 名称。这为您提供了独特的 classes，并允许每个连续的更改不影响以前的更改。

您还可以通过执行以下操作来简化代码：

<% reservations_pending.each do |reservation| %>
  <div style="color:blue;" class="countdown-class" data-due-date="<%= reservation.due_date %>"></div>
<% end %>

<script type="text/javascript">
  $(".countdown-class").each(function() {
    $(this).countdown($(this).data("due-date"), function(event) {
      $(this).text(event.strftime('%D days %H:%M:%S'));
    });
  });
</script>

通过 "storing" 数据属性中的截止日期 div 本身，您可以消除 JS 代码的重复。

编辑：这是一个工作示例 https://jsfiddle.net/3j368s46/

列表中的倒数计时器为每个列表项提供相同的计时器结果 rails

countdown timer on list giving the same timer results for each list item rails

javascript

jquery

html

ruby-on-rails

countdown