列表上的倒数计时器为每个列表项轨道提供相同的计时器结果

Question

我正在尝试创建一个倒数计时器，并且出于某种原因，类inst使这些倒计时中的每一个都是唯一的。我所有的倒计时都是相同的，尽管它们都是不同的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（event）和console.log（“＆lt;％= reservation.due_date％＆gt;”）;

Answer 1

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

有几种方法可以解决这个问题。例如，您可以使用每个预留的id并将其添加到类名中。这为您提供了唯一的类，并允许每个连续的更改不会影响以前的更改。

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

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

通过在div本身的数据属性中“存储”截止日期，您可以消除JS代码的重复。

编辑：这是一个有效的例子https://jsfiddle.net/3j368s46/