4

我正在尝试掌握插值并尝试使用动态字符串（我说动态，因为它可以一直更改，我通过屏幕抓取来获取电影发布的日期）并作为 ID，以便我可以使用 bootstrap scrollspy我的项目

我使用传统的 ID 和锚标签创建了一个 js fiddle，展示了我想要实现的目标。

如您所见，如果我在滚动时位于该部分内，我想显示电影的发行日期。

我的代码如下所示：

<div class="container">
 <div class="row">
  <div class="span8 offset2">
   <div id="dateNav">
    <ul class="dateNav">
      <li><a href="##{date}"></a><% @response.each_pair do |date, movie| %><%= link_to date_format(date) %><% end %></li>
   </ul>
   </div>
  </div>
 </div>
</div>
<div class="span9">
 <% @response.each_pair do |date, movie| %>
  <h3 class="resultTitle fontSize13" id="<%= date %>">Available on&nbsp;<%= date_format(date) %></h3>
</div>
<!-- More movie information here
<% end %>

我的身体是这样的

<body data-spy="scroll" data-target="#dateNav">

我像这样打电话给scrollspy

$('.dateNav').scrollspy()

当您在相关部分时，日期应该出现

CSS

ul.dateNav ul li a {
 display:none;
}

ul.dateNav ul > li.active > a{
display:block
color: red;
text-decoration: underline;
}

但是，当向下滚动页面时，日期不会出现。

任何帮助表示赞赏，真的很想在这里澄清一些理解。

谢谢

编辑

好的，正如乔·皮姆所建议的那样已经改变了

<li><% @response.each_pair do |date, movie| %><%= link_to date_format(date), "##{date}" %><% end %></li>

每个日期现在都有自己的 id，以前没有发生，但相关日期仍然没有出现

现在生成的 HTML

<ul class="dateNav">
 <li>
 <a href="#2013-01-09">9th Jan 2013</a>
 <a href="#2013-01-11">11th Jan 2013</a>
 <a href="#2013-01-18">18th Jan 2013</a>
 <a href="#2013-01-23">23rd Jan 2013</a>
 <a href="#2013-01-25">25th Jan 2013</a>
 <a href="#2013-01-30">30th Jan 2013</a>
 </li>
</ul>

编辑萨拉

调用滚动间谍

$('#spyOnThis').scrollspy();

日期导航

<div class="container">
 <div class="row">
  <div class="span12">
   <div id="dateNav">
    <ul class="nav dateNav">
      <li><% @response.each_pair do |date, movie| %><%= link_to date_format(date), "#d_#{date}" %><% end %></li>
    </ul>
   </div>
  </div>
</div>

电影列表

<div id="spyOnThis">
  <% @response.each_pair do |date, movie| %>
    <h3 class="resultTitle fontSize13" id="d_<%= date %>">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 %>
  </div>

CSS

#spyOnThis {
 height:auto;
 overflow:auto;
}

我将高度设置为自动，因为结果的数量每次都会改变

ul.dateNav > li.active > a {
display:block;
color: red;
text-decoration: underline;
}
4

2 回答 2

5

以数字开头的 ID 无效。来源

尝试在每个 ID 的开头添加一个字符串常量。

<a href="#d_#{date}"></a>

和

<h3 class="resultTitle fontSize13" id="d_<%= date %>">

免责声明：我不认识 Ruby。

编辑

好的，所以我将其剥离并使其正常工作。jsFiddle

我出于小提琴的目的更改了您的一些类和 ID（似乎还有一些混淆.dateNavand #dateNav），但它应该看起来像这样： 

<ul class="nav dateNav">
  <li>
    <a href="#d_#{date}"><% @response.each_pair do |date, movie| %><%= link_to date_format(date) %><% end %></a>
  </li>
</ul>

和

<div class="span9">
  <% @response.each_pair do |date, movie| %>
  <h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on&nbsp;<%= date_format(date) %></h3>
</div>

您可以将 ID 放在div（就像在小提琴中一样）或者h3，没关系。重要的部分是 CSS 以及如何启动 ScrollSpy。

如果您使用 JavaScript ( $('#spyOnThis').scrollspy()) 调用它，则需要将其附加到要触发滚动事件的元素上，而不是跟踪的菜单上。Source
此外，您应该从元素 中删除data-spy和。data-targetbody

最后但并非最不重要的一点是，您调用的元素.scrollspy()需要为插件设置一个height并overflow: auto;设置以跟踪滚动位置。

于 2013-01-23T21:52:04.367 回答
1

在你的 ERB 中，你有

<li><a href="##{date}"></a>

你不是插值它。将其更改为：

<li><a href="#<%= date%>"></a>

编辑。

报废...只是看起来标签应该在循环内？

于 2013-01-23T20:38:25.853 回答