Ruby on Rails 中每个 div 实例的随机背景颜色答案

【问题标题】：Random Background Color for each instance of a div in Ruby on RailsRuby on Rails 中每个 div 实例的随机背景颜色
【发布时间】：2016-05-09 16:11:45
【问题描述】：

我一直在开发一个类似于 yelp-clone 的小型网络应用程序，它在首页上将数据库中的所有位置都列在自己的 div 中：

<% @places.each do |place| %>
  <div class="booyah-box <%= place.id %> col-xs-10 col-xs-offset-1">
    <h1><%= place.name %></h1>`
    <i><%= place.address %></i><br /><br />
    <p><%= place.description %></p><br />
    <p><%= place.id %></p>
  </div>
<% end %>

我已经设置了一个带有 html 颜色代码的数组作为首页的实例变量：

class PlacesController < ApplicationController
  def index
    @places = Place.all
    @background_colors = ["#df494e", "#68a5b7", "#8f978e", "#d8b6ad", "#677b94", "#677b94F", "#66be98", "#fcd06d", "#f8a427", "#d42b14"]
  end
end

我还在我的 index.html.erb 中包含了这个样式标记，以指示包装首页上每个数据库条目的 div 的样式：

<style type="text/css">
  .booyah-box {
    background-color: <%= @background_colors.sample %>;
    -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
    -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
    box-shadow: 1px 1px 2px 0 #d0d0d0;
    border: 1px solid #ccc;
    border-color: #eccbaa;
    margin-top: 10px;
  }
</style>

每次页面加载时，代码都会运行，并且 div 包装器每次都有不同的背景颜色。但是，我正在尝试使 div 包装器的每个实例与数组的颜色不同，但我不知道该怎么做。我尝试了各种枚举并使用实例变量，但我无法让它工作。如果可能的话，我正在尝试仅使用 Ruby 来做到这一点。我该怎么办？

【问题讨论】：

我曾经做过类似的事情并将此页面用作参考：devmag.org.za/2012/07/29/… 这有点阅读，但我很容易将 javascript 转换为 ruby 以获得随机颜色。如果您想确保它与初始数组中的相同颜色不匹配，您可以检查是否包含？ colorArrat.include? randomColor
我会调查的！感谢您的链接。获得随机颜色没有问题，它只是为我遇到问题的每个 div 获得不同的随机颜色。
那么你的位置数和颜色数一样吗？你想让这些颜色中的每一个在每个 div 中只出现一次吗？
你的意思是，你需要不同的背景颜色为数组中的 div ？您可以尝试内联 CSS。它应该可以工作，请寻找 div_for 辅助方法，用于与对象 id 连接的类。
不，位置的数量是不确定的，因为假设的“用户”可以添加更多。我会研究内联 CSS。

标签： html css ruby-on-rails ruby

【解决方案1】：

试试这个： places_controller.rb

class PlacesController < ApplicationController
  def index
    @places = Place.all
  end
end

index.html.erb

<% @places.each do |place| %>
  <div class="booyah-box <%= place.id %> col-xs-10 col-xs-offset-1 color-<%= (1..10).to_a.sample %>">
    <h1><%= place.name %></h1>`
    <i><%= place.address %></i><br /><br />
    <p><%= place.description %></p><br />
    <p><%= place.id %></p>
  </div>
<% end %>

css

.booyah-box {
  -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
  -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
  box-shadow: 1px 1px 2px 0 #d0d0d0;
  border: 1px solid #ccc;
  border-color: #eccbaa;
  margin-top: 10px;
}
.booyah-box.color-1 { background-color: #df494e;}
.booyah-box.color-2 { background-color: #68a5b7;}
.booyah-box.color-3 { background-color: #8f978e;}
.booyah-box.color-4 { background-color: #d8b6ad;}
.booyah-box.color-5 { background-color: #677b94;}
.booyah-box.color-6 { background-color: #677b94;}
.booyah-box.color-7 { background-color: #66be98;}
.booyah-box.color-8 { background-color: #fcd06d;}
.booyah-box.color-9 { background-color: #f8a427;}
.booyah-box.color-10 { background-color: #d42b14;}

希望对您有所帮助。 :)

【讨论】：

看起来很完美！谢谢！我试试看！