Question

我正在尝试掌握插值并尝试使用动态字符串（我说动态因为它可以随时更改，我通过屏幕刮取电影版本来拉日期）并作为ID以便我可以使用我的项目中的bootstrap scrollspy

我使用传统的ID和锚标记创建了a 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;
}

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

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

由于

修改

好的，所以改变了Joe Pym的建议

<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>

为莎拉编辑

调用scrollspy

$('#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;
}

Answer 1

以数字开头的ID无效。 Source

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

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

和

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

_{免责声明：我不认识Ruby。}

<小时/> 的修改

好的，所以我把它剥了下来并让它运转起来。 jsFiddle

为了小提琴的目的，我更改了一些类和ID（似乎也有一些关于.dateNav和#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-target和body。

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

Answer 2

在你的再培训局，你有

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

您没有插入它。将其更改为：

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

EDIT。

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

将Ruby字符串插值为ID

2 个答案: