0

我刚从 Java 背景开始使用 Ruby。我正在尝试编写一个特定的循环，但无法找出正确的语法：

有人可以帮我解决这个问题吗？我正在尝试编写一个循环，但使用不同的 css 类来更改每个块的样式。

意识到这可能很容易，但感谢您的帮助....

    <%= @products.each do |product, i| %>
    <% if i % 1 %>
    <div class="items-row clearfix">
      <div class="one_fourth">
            <div class="item-thumb">
                <a href="" title=""><img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" /></a>
            </div>
            <p><%= product.name %></p>
            <p class="bold">$79.95 AUD</p>
            <p class="color-wrap">
                <span class="color" style="background:#ddd;"></span>
                <span class="color" style="background:#f9f9f9;"></span>
                <span class="color" style="background:green;"></span>
                <span class="color" style="background:red;"></span>
            </p>
        </div> 
    <% elsif i % 4 %>
    <div class="one_fourth last">
        <div class="item-thumb">
            <a href="#" title=""><img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" /></a>
        </div>
        <p><%= product.name %></p>
        <p class="bold">$79.95 AUD</p>
    </div>
    </div><!-- end row -->
    <% else %>
        <div class="one_fourth">
            <div class="item-thumb">
                <a href="#" title=""><img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" /></a>
            </div>
            <p>Item Name</p>
            <p class="bold">$79.95 AUD</p>
        </div>
    <% end %>
<% end %>
4

5 回答 5

2

你可以使用循环做这样的事情：

<% products.each_slice(4) do |slice| %>
  <div class="items-row clearfix">
    <% slice.each_with_index do |product,i| %>
      <div class="one_fourth <%= cycle("first", "second", "third", "fourth") %>">
        <%= render product %>
        <% if i != 3 %>
          <p class="color-wrap">
            <span class="color" style="background:#ddd;"></span>
            <span class="color" style="background:#f9f9f9;"></span>
            <span class="color" style="background:green;"></span>
            <span class="color" style="background:red;"></span>
          </p>
        <% end %>
      </div>
    <% end %>
  </div>
<% end %>

_product.html.erb：

<div class="item-thumb">
  <a href="" title=""><img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" /></a>
</div>
<p><%= product.name %></p>
<p class="bold">$79.95 AUD</p>
于 2012-07-12T12:14:06.277 回答
1

与其在视图中使用 if/else 语句和 CSS 标记，不如将 CSS 外部化，制作一些部分，并使用ActionView::Helpers::TextHelper#cycle。例如：

<%= @products.each do |product| %>
  <div class="<%= cycle('first', 'second', 'third', 'fourth') -%>">
    <!-- 1. let the CSS class handle display differences -->
    <!-- 2. render a partial based on #current_cycle     -->
    <%= render :partial => current_cycle %>        
  </div>
<% end %>
于 2012-07-12T12:15:13.410 回答
0

我会说mod是你的问题。它永远不会进入第一个块，因为 n%1 将始终返回 0。使用irb尝试你的逻辑让你继续。

于 2012-07-12T12:14:04.303 回答
0

您可能想尝试jQuery nth-child

于 2012-07-14T04:19:55.983 回答
-1

我得到了部分答案。稍微改变语法以使用“each_with_index”而不是每个。

仍在尝试解决产品何时可以成为最后一个图块并需要关闭，第一个在行，第一个在集合中，最后一个在行中的很多变化......

谢谢大家，我想我已经回答了我自己的问题。

于 2012-07-13T14:13:24.153 回答