将 Ruby 字符串作为 ID 进行插值

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

。

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

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

我的代码如下所示：

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

以

数字开头的 ID 无效。源

尝试在每个 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()）调用它，你需要把它附加到将触发滚动事件的元素 - 而不是跟踪的菜单。源
此外，您应该从body元素中删除data-spy和data-target。

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

在你的ERB中，你有

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

你没有插值它。将其更改为：

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

编辑。

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

相关内容

最新更新

热门标签：