Rails循环在javascript中失败答案

【问题标题】：Rails loop failing in javascriptRails循环在javascript中失败
【发布时间】：2014-03-28 02:41:15
【问题描述】：

我创建了简单的交易网站。在 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 %>

Projs_helper.rb**

    def date_for_jquery_countdown(date)
    year = date.strftime('%Y')
    month = date.strftime('%-m')
    day = date.strftime('%d')

    "#{year}, #{month}-1, #{day}"

end

application.js

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

我的浏览器显示 index.html.erb 只显示第一个工作，但其他人不显示倒计时

【问题讨论】：

我的模型 def end_date self.start_date + self.funding_period.days end

标签： jquery ruby-on-rails ruby ruby-on-rails-3 for-loop

【解决方案1】：

HTML 中的多个元素不能有相同的 id。

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

改用 CSS 类：

 <div class="countdown"

...

 $('.countdown').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 %>

抱歉，我不知道 ruby，所以我做了你需要更改的 cmets！

【讨论】：

顺便说一句，由于您需要为迭代中的每个元素设置不同的值，因此您需要使用计数器或类似的东西。

【解决方案2】：

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

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

在你的 Javascript 中，使用类

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

  })
</script>

同时将 javascript 块移出循环

【讨论】：

但是，这不会为每个项目设置正确的倒计时日期 - 它会将所有项目设置为最后一个项目的日期。
@FaiqAdam：修改了我的答案。将 javascript 块移出循环
我添加了 class="countdown- 感谢@Vimsha