link_to当前页面边栏

Question

我想知道链接到同一页面上的属性的语法是什么

我有一个日期列表

   <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 才能向下滚动到该日期？ 还是会一步跳到日期？

任何建议表示赞赏，我之前曾链接到其他页面，但不是像这样的同一页面

编辑

我已经尝试过了，但页面只是重新渲染

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

我走在正确的轨道上吗？

谢谢

Answer 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，而不是代码本身。