Rails button_to或link_to圖片

Question

Noob需要一些幫助。我創建一個苦差事圖表爲我的孩子應該看起來像一個在線版本：倒在頂部的X軸，Y軸和天（週日，週一...）上市

http://learningandeducationtoys.guidestobuy.com/i-can-do-it-reward-chart

家務。讓孩子們點擊並接收完成的雜事的明星包裝盒。

的瑣事/ index.html.erb表是難看代碼（對不起）：

清單瑣事

<table> 
    <th><%= "" %></th> 
    <th><%= "SUN" %></th> 
    <th><%= "MON" %></th> 
    <th><%= "TUES" %></th> 
    <th><%= "WED" %></th> 
    <th><%= "THURS" %></th> 
    <th><%= "FRI" %></th> 
    <th><%= "SAT" %></th> 
    <% @chores.each do |chore| %> 
    <tr class="<%= cycle('list-line-odd', 'list-line-even') %>"> 

    <%  ##TODO.. Fix to be sure to link "post" action to "show" child. %> 
    <td> 
     <%= image_tag(chore.image_url, :class => 'list-image') %> 
     <dt><%=h chore.title %></dt> 
    </td> 

    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]), 
    :remote => true %></td> 
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]), 
    :remote => true %></td> 
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]), 
    :remote => true %></td> 
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]), 
    :remote => true %></td> 
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]), 
    :remote => true %></td> 
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]), 
    :remote => true %></td> 
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]), 
    :remote => true %></td> 


    </tr> 
    <% end %> 
</table> 
</div> 

每個雜項的每一天上面創建「添加到電子錢包」的按鈕。錢包是兒童和家務桌之間的連接表。兩個問題：

1. 如何將按鈕切換到表格中，當點擊時，轉向星星圖像（按照示例）？
2. 我如何重構表中的代碼，所以我不違反DRY規則？

Answer 1

這裏有兩個問題，這使得它很難回答。對於DRY部分，您應該認識到您正在複製粘貼相同的語句多次，這是不正確的形式。一般來說，這種事情最好用某種語句的單個實例循環表示。

的一個例子是：將天捲起成存儲在某個地方，然後用一個常數：

<% DAYS.each do |day| %> 
<th><%= day_name %></th> 
<% end %> 

DAYS可以被定義在方便的地方，比如在與此相關的模型，或者類似的東西。如果是這樣的話，它可能需要一個像MyModel::DAYS這樣的前綴，但它們的工作原理是一樣的。

這真的不清楚爲什麼你使用<%= "X" %>這種模式，每當X會做同樣的事情時，它會返回相同的字符串。

您還可以遍歷其它七個td元素相同的原理：

<% DAYS.each do |day| %> 
<td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]), 
:remote => true %></td> 
<% end %> 

即使day變量不使用，這裏的驅動因素，顯然，天數，所以這說得通。如果您每週有五天，那麼這些列會相應縮小。

至於你的問題的第二部分，你正在尋找什麼將被最好地表示爲這些表格單元格的jQuery onclick處理程序。使用非侵入式JavaScript技術，您可以在一整類DOM元素定義操作很容易：

$('td.button').live('click', function() { ... }); 

你會在...部分與AJAX調用獲取並更新單元格的填充。此時單元格內部不需要實際的按鈕，只需使用一些CSS即可使單元格尺寸和顏色合適。由於樣式的原因，這可以通過相應地調整選擇器來輕鬆應用到單元格內的元素。