Rails循环在javascript中失败

Question

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

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

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

对不起，但我不知道红宝石，所以我做了你需要改变的评论！

Answer 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块圈外