列表倒計時計時器列表給每個列表項相同的計時器結果軌道

我試圖創建一個倒數計時器，並由於某種原因，使得每個這些倒計時的類獨特。我所有的倒計時都是相同的，儘管它們都是不同的due_dates。列表倒計時計時器列表給每個列表項相同的計時器結果軌道

在我的console.log（reservation.duedate）我得到不同的due_dates這是正確的，它是假設。
倒計時對於js中的倒計數函數中的每個列表都使用due_date的第一個結果。這是不正確的;每個列表項目的每個倒計時必須是分開的。

這是your_essays方法在reservations_controller：

@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（」 <％=保留。 due_date％>「）;

來源

2017-03-07 Michael Lombardo

實際上是被傳遞給javascript函數是什麼事件？（你可以console.log嗎？） –

你的實現有一個錯誤。您正在更新每行中當前數據的整個類別......這不是您應該如何執行的。 –

我在問題中添加了console.log（event）圖片以顯示我在控制檯中看到的內容。事件的第一個日期不同，然後所有的日期都顯示相同的日期。 –

每次您經過循環時，都會將.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/

來源

2017-03-08 23:09:53 gwcodes

在我的控制檯即時通訊中得到一個錯誤，它沒有顯示錯誤似乎被捕獲到我複製粘貼到我的資產/ JavaScripts的js文件中。錯誤是：拋出新的錯誤（「無法投射」+ dateString +「到日期對象。「）;'在稱爲方法：{'im使用'函數parseDateString（dateString）：'的jQuery V2.2.0最後的倒計時（http://hilios.github.io/jQuery.countdown/）' –

主要錯誤說：'未捕獲的錯誤：無法將'未定義'轉換爲日期對象。' –

這就是我在編寫代碼時未經測試就會發生什麼情況:-)現在修改了答案，並且有一個小提示來展示它的實際操作。 – gwcodes

列表倒計時計時器列表給每個列表項相同的計時器結果軌道

回答

相關問題