Сбой цикла Rails в JavaScript

0

Я создаю сайт Simple deal. Когда в цикле 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

Мой браузер display index.html.erb показывает только первый, но другие не отображают обратный отсчет

Изображение 174551

  • 0
    Моя модель def end_date self.start_date + self.funding_period.days end
Теги:
for-loop
ruby-on-rails-3

2 ответа

1
Лучший ответ

Вы не можете иметь один и тот же идентификатор для нескольких элементов в HTML.

Вы создаете множество элементов с одним и тем же идентификатором, и будет работать только первый.

Вместо этого используйте класс CSS:

 <div class="countdown"

...

 $('.countdown').countdown(

РЕДАКТИРОВАТЬ:

Однако для каждой итерации вам нужно установить одно другое значение, поэтому я бы использовал идентификатор, но с помощью счетчика, например:

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

Извините, но я не знаю рубина, поэтому я сделал комментарии, которые вам нужно будет изменить!

Поделиться
  • 0
    Кстати, поскольку вам нужно другое значение для каждого элемента в вашей итерации, вам нужно использовать счетчик или что-то в этом роде.
  • 0
    Я только что отредактировал свой ответ, чтобы решить вашу проблему
Показать ещё 1 комментарий
1

Не очень хорошая практика иметь более одного элемента на странице с одним и тем же идентификатором html. В вашем случае все элементы обратного отсчета имеют одинаковый идентификатор (#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 из цикла

Поделиться
  • 0
    однако, это не будет устанавливать правильную дату обратного отсчета для каждого проекта - он установит для всех них дату последнего проекта.
  • 0
    Он показывает все результаты дублирования обратного отсчета.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню