插入Ruby字符串作为ID

Question

I am trying to grasp interpolation and am trying to use a dynamic string ( i say dynamic as it can change all the time, I am pulling dates via a screen scrape for movie releases) and as an ID so that i can use bootstrap scrollspy in my project 我正在尝试掌握插值并尝试使用动态字符串（我说动态字符串，因为它可以随时更改，我通过屏幕抓取来拉电影的日期以发布电影）和ID，以便我可以在其中使用bootstrap scrollspy我的项目

I created a js fiddle using conventional ID's and anchor tags that demonstrates what I am trying to achieve. 我使用常规ID和锚标记创建了一个js小提琴，以演示我正在尝试实现的目标。

As you can see, I would like to show the release date of a film if I am within that section as I am scrolling. 如您所见，如果我在滚动时位于该部分中，我想显示电影的发行日期。

My code looks like this: 我的代码如下所示：

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

I have my body set like so 我的身体像这样

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

and am calling scrollspy like so 并像这样调用scrollspy

$('.dateNav').scrollspy()

When you are in the relevant section the date is supposed to appear 当您在相关部分中时，日期应该会出现

CSS 的CSS

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

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

however when scrolling down the page the dates do not appear. 但是，当向下滚动页面时，日期不会出现。

Any help appreciated, would really like to clarify some understanding here. 任何帮助表示赞赏，真的想在这里澄清一些理解。

Thanks 谢谢

EDIT 编辑

ok so have changed as Joe Pym suggested 好的，所以按照乔·皮姆的建议进行了更改

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

Each date has its own id now which wasnt happening before but still no appearance of the relevant date 每个日期现在都有其自己的编号，该编号以前未发生过，但相关日期仍未出现

HTML now generated 现在生成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>

EDIT for Sara 编辑萨拉

calling scrollspy 调用scrollspy

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

Nav for dates 导航日期

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

List of Movies 电影清单

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

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

I set height as auto because the number of results can change every time 我将高度设置为自动，因为结果数会每次更改

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

Answer 1

IDs that start with a number are invalid. 以数字开头的ID无效。 Source 资源

Try adding a string constant to the beginning of each ID. 尝试在每个ID的开头添加一个字符串常量。

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

and 和

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

_{Disclaimer: I don't know Ruby.} _{免责声明：我不了解Ruby。}

EDIT 编辑

Okay, so I stripped this down and got it working. 好吧，所以我将其剥离并使其正常工作。 jsFiddle jsFiddle

I changed some of your classes and IDs for fiddle purposes (also there seemed to be some confusion about .dateNav and #dateNav ), but it should look something like this: 我更改了您的某些类和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>

and 和

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

You can put the IDs on div (like in the fiddle) or h3 , it doesn't matter. 您可以将ID放在div （如小提琴中）或h3 ，这无关紧要。 The important part is the CSS and how you initiate ScrollSpy. 重要的部分是CSS以及如何启动ScrollSpy。

If you're calling it with JavaScript ( $('#spyOnThis').scrollspy() ), you need to attach it to the element that is going to trigger scroll events - not the menu that keeps track. 如果您使用JavaScript（ $('#spyOnThis').scrollspy() ）进行$('#spyOnThis').scrollspy() ，则需要将其附加到将触发滚动事件的元素上，而不是保持跟踪的菜单上。 Source 资源
Furthermore, you should remove data-spy and data-target from the body element. 此外，您应该从body元素中删除data-spy和data-target 。

Last but not least, the element you're calling .scrollspy() on needs to have a height and overflow: auto; 最后但并非最不重要的一点是，您正在调用.scrollspy()的元素需要具有height和overflow: auto; set for the plugin to keep track of the scroll position. 设置插件以跟踪滚动位置。

Answer 2

In your ERB, where you have 在您的ERB中

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

You aren't interpolating it. 您没有内插它。 Change it to: 更改为：

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

EDIT. 编辑。

Scrap that...just looks like that a tag should be inside the loop? 废话……只是看起来标签应该在循环内？

插入Ruby字符串作为ID

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-01-23 21:52:04

解决方案2
1 2013-01-23 20:38:25

插入Ruby字符串作为ID

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-01-23 21:52:04

解决方案2 1 2013-01-23 20:38:25

解决方案1
5 已采纳 2013-01-23 21:52:04

解决方案2
1 2013-01-23 20:38:25