链接到当前页面轨道

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