在每次迭代中在不同位置显示信息

时间:2014-06-08 22:01:20

标签: css ruby-on-rails twitter-bootstrap

我正在遍历数据库并在同一行的两列中显示每个结果。目前,图像始终显示在每行的第一列中。我想在其他方面交替使用,右边的图像和左边的描述。 example

  <% @guide.in_groups_of(2, false).each do |guide_row| %>
    <% for guide in guide_row %>
    <div class='row guide-row'>
        <div class="col-md-6">
            <%= link_to image_tag(guide.image(:large)), guide.image(:xlarge), :class => 'guide-image' %>
        </div>
        <div class="col-md-6 guide-list ">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="  #info_<%= guide.id %>">
            <h2 class='guide'><%= guide.title %></h2>
            </a>
            <h4 class='guide'>From <%= guide.date_starting.strftime("%a %b #{guide.date_starting.day.ordinalize}") %> to <%= guide.date_ending.strftime("%a %b #{guide.date_starting.day.ordinalize}") %></h4>
            <div class='col-md-12'>
            </div>
            <div class="accordion" id="categories">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle btn glyphicon" data-toggle="collapse" data-parent="#accordion" href="    #info_<%= guide.id %>">
                        <i class='glyphicon glyphicon-info-sign info-icon'></i>
                        </a>
                        <% unless guide.extra_info.nil? %>
                        <%= link_to ' ', guide.extra_info, :class => 'glyphicon glyphicon-globe info-icon'  %>
                        <% end %>
                        <div id="info_<%= guide.id %>" class="accordion-body collapse">
                            <div class="acccordion-inner">
                                <% if guide.description.empty? %>
                                <h4>No description available</h4>
                                <% else %>
                                <p class='guide-description'><%= guide.description %></p>
                                <% end %>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

提前致谢。

1 个答案:

答案 0 :(得分:0)

我不确定你是如何迭代你的行的,从上面来看并不是很清楚。 但我建议你创建2个部分(小的erb文件),一个用于偶数行,一个用于奇数行。然后根据你的迭代器,你会渲染偶数部分或奇数部分,每个部分都有图像和文本相互交换。

基本上是这样的:(没有经过测试,但应该给你一个想法。

<%= @even_row? ? render 'shared/even_row' : render 'shared/odd_row' %>

找出哪一对甚至是奇数你可以做这样的事情:

 <% @guide.in_groups_of(2, false).each_with_index do |guide_row, index| %>

<%= index.even? ? render 'shared/even_row' : render 'shared/odd_row' %>

然后您可以使用index.even?来确定要渲染的部分。

希望有所帮助