根據使用erb的單元格值設置表單元格的不同顏色 - 在軌道上使用紅寶石

Question

我目前正在爲軌道上的紅寶石戰艦遊戲做板。 我被困在如何更改表格單元格的顏色（取決於數組中的哪些值@actions是內部的。我嘗試使用case語句，並且if'statement在html.erb中，但我無法找到正確的語法而我想知道另一件事：我應該爲此做一個輔助方法和在HTML中使用它，而不是在那裏編碼

這裏是控制器：

class BoardsController < ApplicationController 
    def new 
     @actions = ['none', 'hit', 'miss', 'ship', 'special'] 
     @grid = [] 
     for row in 0..9 
      @grid.push([]) 
      for column in 0..9 
      @grid[row].push({ 
       'action' => @actions.sample 
      }) 
      end 
     end 
    end 
end 

這裏是視圖：

<table class="table table-striped table-bordered"> 
    <% for row in 0..9 %> 
     <tr> 
      <% for column in 0..9 %> 
       <td> 
        <%= @grid[row][column]['action'] %> 
       </td> 
      <% end %> 
     </tr> 
    <% end %> 
</table> 

Answer 1

我認爲最簡單的soluti將會爲每個動作創建CSS類，例如：

<style> 
    .none { background-color: blue; } 
    .hit  { background-color: red; } 
    .miss { background-color: yellow; } 
    .ship { background-color: white; } 
    .special { background-color: green; } 
</style> 

然後只需添加動作（即， @grid[row][column]['action']）在class屬性爲td標籤：

<% for column in 0..9 %> 
    <td class="<%= @grid[row][column]['action'] %>"></td> 
<% end %> 

---

不相關的問題，但值得注意的是：你也應該選擇使用each，而不是for，是更地道。

例如，您的視圖代碼可以重構爲：

<table class="table table-striped table-bordered"> 
    <% (0..9).each do |row| %> 
    <tr> 
     <% (0..9).each do |column| %> 
     <td class="<%= @grid[row][column]['action'] %>"></td> 
     <% end %> 
    </tr> 
    <% end %> 
</table>