Question

我对RoR＆amp; amp;我无法在HTML中迭代erb代码。

我正在使用 twitter bootstrap image carousel ＆amp;我正在尝试将我的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>

Answer 1

您可以尝试<% 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>

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>

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

工作代码 - 在if语句之前

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

2 个答案: