4

私は補間を把握しようとしており、動的文字列を使用しようとしています (常に変化する可能性があるため、動的と言い、映画のリリースのスクリーン スクレイプを介して日付を取得しています)、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;
}
4

2 に答える 2

5

数字で始まる ID は無効です。ソース

各 ID の先頭に文字列定数を追加してみてください。

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

と

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

免責事項: 私は Ruby を知りません。

編集

さて、私はこれを取り除き、それを機能させました。jsフィドル

フィドルの目的でクラスと 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>

divID を(フィドルのように) またはに付けることができますが、h3問題ではありません。重要な部分は、CSS と、ScrollSpy を開始する方法です。

JavaScript ( ) で呼び出す場合は$('#spyOnThis').scrollspy()、追跡するメニューではなく、スクロール イベントをトリガーする要素にアタッチする必要があります。ソースさらに、要素 からand
を削除する必要があります。data-spydata-targetbody

最後になりましたが、プラグインがスクロール位置を追跡するために、呼び出している要素にはとが設定され.scrollspy()ている必要があります。heightoverflow: auto;

于 2013-01-23T21:52:04.367 に答える
1

あなたが持っているあなたのERBで

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

あなたはそれを補間していません。次のように変更します。

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

編集。

それをスクラップ...タグがループ内にあるはずのように見えますか？

于 2013-01-23T20:38:25.853 に答える