0

同じページの属性にリンクする構文は何だろうと思っていました

日付のリストがあります

   <ul>
     <% @response.each_pair do |date, movie| %>
      <li><%= link_to date_format(date), date, :class => 'scroll_to' %></li>
     <% end %>
   </ul>

これらはその後、そのように各日付の下に映画を持っています

<% @response.each_pair do |date, movie| %>
    <h3 class="resultTitle fontSize13">Available on&nbsp;<%= date_format(date) %></h3>
    <% movie.each do |m| %>
      <div class="thumbnail clearfix">
        <img class="pull-left" src=<% if m.image_link %> <%= m.image_link %> <% else %> "/assets/noimage.jpg" <% end %>>
        <div class="caption pull-right">
          <%= link_to m.name, m.title_id, :class => 'resultTitle fontSize11' %>
          <p class="bio"><%= m.bio %></p>
          <p class="resultTitle">Cast</p>
          <p class="bio"><%= m.cast.join(", ") unless m.cast.empty? %></p>
          <%= link_to "Remind me", reminders_path(:title_id => m.title_id), :method => :post, :class => 'links button' %>
        </div>
      </div>
    <% end %>
  <% end %>

私が達成したいのは、ユーザーがリスト内の日付をクリックすると、同じページの映画でその日付に移動することです

各日付の私の属性は

"release_date"

その日付までスクロールダウンするために、それにリンクする必要がありますか？おそらくJqueryの一部でもありますか？それとも、1つのステップで日付にジャンプしますか？

アドバイスをいただければ幸いです。以前に他のページにリンクしたことがありますが、このような同じページではありません。

編集

これを試しましたが、ページが再レンダリングされます

<li><%= link_to date_format(date), params.merge(:release_date => 'release_date'), :class => 'scroll_to' %></li>

私は正しい方向に進んでいますか？

ありがとう

4

1 に答える 1

1

必要なのは、日付に一意の識別子を付けて、リスト内の識別子にリンクすることだけです。たとえば、以下では、各日付のh3に日付オブジェクトに相対的なIDを指定します。ブラウザは内部リンクの処理方法を知っており、対応する識別子にジャンプするだけです。リンクをクリックすると、リンク先のフィールドのIDがURLの末尾に追加されることに注意してください。

<ul>
   <%- index = 0 %>
   <% @response.each_pair do |date, movie| %>
     <%- index += 1 %> 
     <li><%= link_to date_format(date), "##{index}", :class => 'scroll_to' %></li>
   <% end %>
</ul>
<%- index = 0 %>
<% @response.each_pair do |date, movie| %>
    <%- index += 1 %>
    <h3 class="resultTitle fontSize13" id="<%= index %>">Available on&nbsp;<%= date_format(date) %></h3>
    <% movie.each do |m| %>
      <div class="thumbnail clearfix">
        <img class="pull-left" src=<% if m.image_link %> <%= m.image_link %> <% else %> "/assets/noimage.jpg" <% end %>>
        <div class="caption pull-right">
          <%= link_to m.name, m.title_id, :class => 'resultTitle fontSize11' %>
          <p class="bio"><%= m.bio %></p>
          <p class="resultTitle">Cast</p>
          <p class="bio"><%= m.cast.join(", ") unless m.cast.empty? %></p>
          <%= link_to "Remind me", reminders_path(:title_id => m.title_id), :method => :post, :class => 'links button' %>
        </div>
      </div>
    <% end %>
<% end %>

追加されたJQueryトランジションについては、置き換えることができます

<li><%= link_to date_format(date), "##{index}", :class => 'scroll_to' %></li>

と

<li><%= link_to_function date_format(date), "$('html, body').animate({scrollTop:$('##{index}').offset().top }, 'slow');", :class => 'scroll_to'%></li>

上記は厳密にはDRYアプローチではありませんが、それを抽象化するために重要なことは、コード自体ではなく、ページの他の場所で一意のIDにリンクしていることです。

于 2013-01-22T21:14:29.390 に答える