ruby-on-rails - Rails Odd Even If 语句

Question

我的 Activity 模型有一个循环

<% @activities.each do |activity| %>
<div>
    <div class="cell">
        <%= image_tag(activity.image) %>
    </div>
    <div class="cell">
        <h4><%= activity.title %></h4>
        <p><%= activity.description %></p>
        <span><%= activity.distance %></span>
    </div>
</div>
<% end %>  

我想创建一个之字形效果，因此我需要为每个偶数活动重新排列 HTML，因此标记将如下所示：

<div>
  <div class="cell">
    <h4><%= activity.title %></h4>
    <p><%= activity.description %></p>
    <span><%= activity.distance %></span>
  </div>
  <div class="cell">
    <%= image_tag(activity.image) %>
  </div>
</div>

有没有办法用 if 语句来做到这一点？像这样的东西：

<% if activity.odd? %>
 <% @activities.each do |activity| %>
   <div>
     <div class="cell">
   <%= image_tag(activity.image) %>
 </div>
 <div class="cell">
   <h4><%= activity.title %></h4>
   <p><%= activity.description %></p>
   <span><%= activity.distance %></span>
 </div>
   </div>
  <% end %>
<% else %>
  <% @activities.each do |activity| %>
    <div>
      <div class="cell">
    <h4><%= activity.title %></h4>
    <p><%= activity.description %></p>
    <span><%= activity.distance %></span>
  </div>
  <div class="cell">
    <%= image_tag(activity.image) %>
      </div>
</div>
<% end %>

Answer 1

有几种方法可以做到这一点。

1. 第一个也是最好的方法是使用 CSS 的nth-child选择器来实现，假设完全通过 CSS 可以达到您想要的效果。使用nth-child(odd)or nth-child(even)，如使用 CSS 替换表格行颜色中所述？

2. 如果您使用 迭代集合.each，则可以添加 a.with_index并检查索引是奇数还是偶数：

   <% @activities.each.with_index do |activity, index| %>
     <% if index.odd? %>
       ...
     <% else %>
       ...
     <% end %>
   <% end %>
   

   请注意，默认情况下索引是从零开始的，因此您的第一个元素将被视为“偶数”。如果您希望交替以奇数开始，则可以传递1to的起始索引：with_index

   <% @activities.each.with_index(1) do |activity, index| %>
   

3. 使用的替代方法with_index是使用 Rails 的cycle帮助器，它“神奇地”在每次调用时轮流返回下一个参数：

   <% @activities.each do |activity| %>
     <% if cycle('odd', 'even') == 'odd' %>
       ...
     <% end %>
   <% end %>
   

另请注意，这是重构的绝佳机会。您应该将两个重复使用的celldiv 提取到它们自己的部分中，并按照您想要的顺序呈现它们：

<% if index.odd? %>
  <%= render h4_part %>
  <%= render img_part %>
<% else %>
  <% render img_part %>
  <% render h4_part %>
<% end %>