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

我试图创建一个倒计时计时器，由于某种原因，该类将使每个倒计时都是唯一的。我所有的倒计时都是一样的，尽管它们都是不同的截止日期。
在我的console.log（reservation.duedate）中，我得到了不同的到期日期，这是正确的，它应该是什么。
倒计时是使用js中倒计时函数中每个列表的第一个到期日期结果。这不正确；每个列表项的每个倒计时都必须是独立的。

这是您在预订控制器中的论文方法：

@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)

你的论文.html.erb：

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

这是“你的论文”中的部分。html.erb称为“你的论文”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（“”）；

最佳答案

每次循环时，都会将.countdown-class的每个实例重置为新的到期日期。这应该可以解释为什么他们都在承担最后一个的价值。
有几种方法可以解决这个问题。例如，您可以使用每个预订的id并将其添加到类名中。这将为您提供uniques类，并允许每个连续的更改不影响以前的更改。
您还可以通过执行以下操作简化代码：

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

关于javascript - 列表中的倒数计时器为每个列表项提供相同的计时器结果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42656747/