我正在尝试掌握插值并尝试使用动态字符串(我说动态,因为它可以一直更改,我通过屏幕抓取来获取电影发布的日期)并作为 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 <%= 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 <%= 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;
}