插入Ruby字符串作為ID

Question

我正在嘗試掌握插值並嘗試使用動態字符串（我說動態字符串，因為它可以隨時更改，我通過屏幕抓取來拉電影的日期以發布電影）和ID，以便我可以在其中使用bootstrap 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>

每個日期現在都有其自己的編號，該編號以前未發生過，但相關日期仍未出現

現在生成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無效。 資源

嘗試在每個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() ）進行$('#spyOnThis').scrollspy() ，則需要將其附加到將觸發滾動事件的元素上，而不是保持跟蹤的菜單上。 資源
此外，您應該從body元素中刪除data-spy和data-target 。

最后但並非最不重要的一點是，您正在調用.scrollspy()的元素需要具有height和overflow: auto; 設置插件以跟蹤滾動位置。

Answer 2

在您的ERB中

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

您沒有內插它。 更改為：

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

編輯。

廢話……只是看起來標簽應該在循環內？

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