使用嵌套的if语句遍历嵌入的ruby代码块

Question

我对RoR比较陌生，在遍历erb HTML代码时遇到麻烦。

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

同样，图像的相应<div>标签也需要使第一个<div>的class="item active ，但随后的<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>

Answer 1

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

一种更有效，更清洁的方法是执行类似

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

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