Jquery javascript中的Rails循环失败

我创建简单的交易网站。在index.html.erb循环中时，仅第一个循环工作。但是它在show.html.erb上工作

<h1>Listing Deal</h1><% @projs.each do |proj| %>

<%= proj.title %><br />

<% if Time.now < proj.end_date %>
  <h3>Days Left:</h3> <div id="countdown" style="width:40%"> <%= distance_of_time_in_words(Time.now, proj.end_date)  %> </div>
<% else %>
  <h3> The Project period has passed! </h3>
<% end  %>

<script type="text/javascript">
  $(document).ready(function(){
    $('#countdown').countdown({
      "until" : new Date(<%= date_for_jquery_countdown(proj.end_date) %>)
    });

  })
</script><% end %>

application.js

//= require jquery.plugin
//= require jquery.countdown

我的浏览器display index.html.erb仅显示第一个正在工作，而其他浏览器不显示倒计时

<% if Time.now < proj.end_date %>
  <h3>Days Left:</h3> <div class="countdown" style="width:40%"> <%= distance_of_time_in_words(Time.now, proj.end_date)  %> </div>
<% else %>
  <h3> The Project period has passed! </h3>
<% end  %>

---

在HTML中，不能对多个元素使用相同的id

您正在创建许多具有相同id的元素，并且只有第一个可以工作

改用CSS类：

 <div class="countdown"

编辑：

但是，您需要为每个迭代设置一个不同的值，因此我将使用一个ID，但带有一个计数器，例如：

<!-- declare a counter here -->
<h1>Listing Deal</h1><% @projs.each do |proj| %>

<%= proj.title %><br />

<% if Time.now < proj.end_date %>
  <h3>Days Left:</h3> <div id="countdown_<$= counter %>" style="width:40%"> <%= distance_of_time_in_words(Time.now, proj.end_date)  %> </div>
<% else %>
  <h3> The Project period has passed! </h3>
<% end  %>

<script type="text/javascript">
  $(document).ready(function(){
    $('#countdown_<$= counter %>').countdown({
      "until" : new Date(<%= date_for_jquery_countdown(proj.end_date) %>)
    });

  })
</script>
<!-- assign your counter = counter + 1 here -->
<% end %>

上市交易


剩余天数：
项目期已经过去了！
$（文档）.ready（函数（）{
$（'倒计时'）。倒计时({
“直到”：新日期（）
});
})

---

对不起，我不认识ruby，所以我做了一些你需要修改的评论

在一个页面中有多个具有相同html id的元素不是一个好做法。在您的情况下，所有倒计时元素都具有相同的id（#倒计时）将其更改为类（并可能将宽度：40%移动到倒计时下的css文件）

剩余天数：
项目期已经过去了！

在Javascript中，使用类

<script type="text/javascript">
  $(document).ready(function(){
    $('.countdown').countdown({
      "until" : new Date($(this).text())
    });

  })
</script>

$（文档）.ready（函数（）{
$（'.countdown'）。倒计时({
“直到”：新日期（$（this）.text（））
});
})

---

同时将javascript块移出循环

但是，这不会为每个项目设置正确的倒计时日期，而是将所有项目都设置为最后一个项目的日期。@FaiqAdam:修改了我的答案。将javascript块移出loopi added class=“countdown-thank@Vimshabtw，因为迭代中的每个元素都需要不同的值，所以需要使用计数器或类似的东西。我的模型def end_date self.start_date+self.funding_period.days end

<% if Time.now < proj.end_date %>
  <h3>Days Left:</h3> <div class="countdown" style="width:40%"> <%= distance_of_time_in_words(Time.now, proj.end_date)  %> </div>
<% else %>
  <h3> The Project period has passed! </h3>
<% end  %>

<script type="text/javascript">
  $(document).ready(function(){
    $('.countdown').countdown({
      "until" : new Date($(this).text())
    });

  })
</script>