2

我对 RoR 比较陌生，并且在HTML迭代erb.

我正在使用twitter bootstrap 图像轮播& 我正在尝试将我的 Apps 图像插入其中。问题是，<li>轮播中的第一个需要class与后续的不同<li>，即class="active".

同样，图像的相应<div>标签也需要class="item active为第一个<div>而不是后续<div>的。

我可以使用代码块正常迭代我的图像，但是当我尝试放入一个if语句来满足第一次迭代中所需的特殊类时，我遇到了麻烦。我认为我的if子句没有正确的条件语句，即<% if @hikingtrail.photos[0] %>，[0]似乎是错误的。无论如何，当我尝试它时，它会弄乱图像轮播，但不会抛出任何错误，只是图像重叠而不是从一个滑动到下一个。

工作代码 - if 语句之前

<div id="show_right"> 
  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <% counter = 1 %>
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <% @hikingtrail.photos.each do || %>
      <li data-target="#myCarousel" data-slide-to="<%= counter %>"></li>
      <% counter += 1 %>
      <% end %>
    </ol>

    <div class="carousel-inner">
      <div class="item active">
        <img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
      </div>
      <% @hikingtrail.photos.each do |photo| %>
      <div class="item">
      <%= image_tag photo.image_url(:large).to_s %>
      </div> 
      <% end %>      

    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>
</div>

尝试的解决方案（使用 if 语句）

<div id="show_right"> 
  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <% counter = 1 %>
      <% @hikingtrail.photos.each do || %>
        <% if @hikingtrail.photos[0] %>
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <% else %>
        <li data-target="#myCarousel" data-slide-to="<%= counter %>"></li>
        <% end %>
        <% counter += 1 %>
      <% end %>
    </ol>

    <div class="carousel-inner">
      <% @hikingtrail.photos.each do |photo| %>
        <% if @hikingtrail.photos[0] %>
          <div class="item active">
        <% else %>
          <div class="item">
        <% end %>
        <%= image_tag photo.image_url(:large).to_s %>
      </div> 
      <% end %>      
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>
</div>
4

2 回答 2

2

您可以尝试<% if @hikingtrail.photos[0] == photo %>查看您当前photo的照片是否与@hikingtrail 收藏中的第一张照片相同。但是，您在第一个块中缺少photo参数。each

更有效和更清洁的方法是做类似的事情

<div id="show_right"> 
  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <% @hikingtrail.photos.each_with_index do |photo, index| %>
        <li data-target="#myCarousel" data-slide-to="<%= index + 1 %>" class="<%= index == 0 ? 'active' : ''"></li>
      <% end %>
    </ol>

    <div class="carousel-inner">
      <% @hikingtrail.photos.each_with_index do |photo, index| %>
        <div class="<%= index == 0 ? 'item active' : 'item' %>">
          <%= image_tag photo.image_url(:large).to_s %>
        </div> 
      <% end %>      
    </div>
    ...
  </div>
</div>
于 2013-04-02T22:39:02.103 回答
2

我相信解决您的问题的更简单的方法是使用each_with_index. 如果是index == 0，则将类放入active元素。

我有这个代码在当前自己的应用程序中工作。我认为它比你的更简单。

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <% (0..@carousel.length - 1).to_a.each do |index| %>
      <li data-target="#myCarousel" data-slide-to="<%= index %>" 
           class="<%= 'active' if index == 0 %>" ></li>
    <% end %>
  </ol>
  <div class="carousel-inner">
    <% @carousel.each_with_index do |photo, index| %>
      <div class="item <%= 'active' if index == 0 %>">
        <%= image_tag photo.image_url.to_s %>
      </div>
    <% end %>
  </div>
</div>
于 2013-04-02T22:42:34.933 回答