リスト上のカウントダウンタイマーは、各リストアイテムに対して同じタイマー結果を与えます。

Question

私はカウントダウンタイマーを作成しようとしていますが、何らかの理由でクラスがこれらのカウントダウンを一意にしています。彼らのすべてのdue_datesは同じですが、私のカウントダウンはすべて同じイベントです。

• 私のconsole.log（reservation.duedate）には正しいdue_datesとなるものがあります。

• countdownは、jsのcountdown関数の各リストに対して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>

これは、（イベント）とはconsole.log（」<% =予約CONSOLE.LOGさ

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

ここ

_your_essays_completed.html.erb呼ばyour_essays.html.erb内の部分です。 due_date％> "）;

Answer 1

ループを終了するたびに、.countdown-classのすべてのインスタンスを新しい期日にリセットします。それはなぜ彼らがすべて最後のものの価値を取っているのかを説明するはずです。

これを修正するにはいくつかの方法があります。各予約のidを使用して、クラス名に追加することができます。これにより、ユニークなクラスが提供され、連続する各変更が以前の変更に影響しないようになります。 DIV自体のデータ属性内の期日を「保存」することで

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

、あなたがの繰り返しをなくすことができるしている：

はまた、のような何かをすることによって、コードを合理化することができJSコード。

編集：ここでは実際にはjavascript関数に渡されるhttps://jsfiddle.net/3j368s46/