Question

我一直在开发一个类似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做这件事，如果可能的话。我该怎么做呢？

Answer 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;}

希望这有帮助。：）

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

1 个答案: