ruby-on-rails – 将Ruby字符串插值为ID

发布时间：2020-12-17 03:04:35 所属栏目：百科来源：网络整理

导读：我正在尝试掌握插值,并尝试使用动态字符串(我说动态,因为它可以一直改变,我通过屏幕刮取电影版本拉日期)和作为ID,以便我可以使用bootstrap scrollspy in我的项目我使用传统的ID和锚标签创建了a js fiddle,它展示了我想要实现的目标. 正如你所看到的,我想展

我正在尝试掌握插值,并尝试使用动态字符串(我说动态,因为它可以一直改变,我通过屏幕刮取电影版本拉日期)和作为ID,以便我可以使用bootstrap scrollspy in我的项目

我使用传统的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,"#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无效. 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
此外,您应该从body元素中删除data-spy和data-target.

最后但并非最不重要的是,您调用.scrollspy()的元素需要有一个高度和溢出：auto;为插件设置以跟踪滚动位置.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!