根据元素的大小将数组中的项目放入 div 类中答案

【问题标题】：Placing items in an array into div classes based on size of element根据元素的大小将数组中的项目放入 div 类中
【发布时间】：2012-08-04 14:11:05
【问题描述】：

我有一个数组，things = [1, 500, 900, 0, -105, -8, 16, 4]，我想根据它们是大于零、小于零还是等于零，在我的视图中将它们显示为红色、绿色或黑色。

现在我的代码如下所示：

<%= @things.each do |p|%>
 <% if p > 0 %>
      <%= p  %>
    <% elsif p < 0 %>
      <%= p %>
    <% else %>
      <%= p %>
 <% end %>
<% end %>

我没有正确显示开始的数字，我已经经历了几次将它们放入 div 的迭代，但似乎没有任何效果。一旦我在课堂上得到它们，我就可以很容易地添加颜色。（我还需要保持它们在数组中的顺序）

任何帮助将不胜感激。

【问题讨论】：

标签： ruby-on-rails ruby class html

【解决方案1】：

不知道这里有什么问题

 <% @things.each do |p|
     if p < 0
       class_name = 'red'
     elsif p > 0 
       class_name = 'green'
     else 
       class_name = 'black'
     end %>
     <div class="<%=class_name%>"><%= p %></div> 
<% end %>

然后是css：

.red{color:red;}
.green{color:green;}
.black{color:black;}

编辑：在您的示例中，您使用的是<%= @things.each。不要将<%= 用于不应该输出任何内容的东西

【讨论】：

谢谢。没有真正的问题，只是想了太久，我的大脑停止了工作。
查看我的答案，了解使用spaceship operator 获得超过/低于/等于 0 的更简洁的方法。
另外，请注意，使用 CSS 类名来描述您希望传递的样式是 generally a bad idea。 +1，但是，用于提供有效的解决方案。
我同意你的看法，但有时它可以用于简单直接的声明。例如，我喜欢声明一个名为 clear 的类，clear:both; 以快速将其应用于某些元素
@AnthonyAlberto 我的 Rails 应用很生气 - syntax error, unexpected keyword_elsif, expecting keyword_end elsif p > 0

【解决方案2】：

如果您希望它们按正/负/0 分组

<% @things.group_by{ |n| n<=>0 }.sort.each do |sign,items|%>
  <ul class="<%= sign==-1 ? 'negative' : sign==1 ? 'positive' : 'zero'%>">
    <% items.each do |item| %>
      <li><%= item></li>
    <% end %>
  </ul>
<% end %>

如果您希望它们按数组顺序排列，只需分类

<ul>
  <% @things.each do |thing|
    css = case thing <=> 0
      when -1 then "negative"
      when  0 then "zero"
      when  1 then "positive"
    end
    %>
    <li class="<%=css%>"><%= thing %></li>
  <% end %>
</ul>

请注意，您在 each 包装器的开头错误地使用了等号：

<%= @things

...这将导致整个数组的 to_s 表示被输出（你不希望这样）。

【讨论】：

【解决方案3】：

我能想到的第一件事就是构建一个视图助手

def set_color number 
  case
    when number == 0 
       "black"
    when number > 0
       "green"
    when number < 0
       "red"
  end
end

在视图中

<% @things.each do |p|%>
<div class="<%= set_color(p)%>"> <%= p %> </div>
<% end %>

最后做 CSS

【讨论】：

+1 表示工作，但 -1 表示糟糕的风格。从该方法中删除每个 return 语句，您会得到相同的结果，但代码更惯用。