Rails 按钮_至或链接_至图像

Question

菜鸟需要一些帮助。我正在为我的孩子创建一个家务表，它应该看起来像在线版本：

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

杂务在 Y 轴上列出，日期（星期日、星期一...）在顶部 X 轴上列出。孩子们可以点击盒子，完成家务即可获得星星。

Chores/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>

上面为每天的每项杂务创建了“添加到钱包”按钮。 Wallets 是 Children 表和 Chores 表之间的连接表。两个问题：

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 即可使单元格具有正确的大小和颜色。出于样式原因，通过相应调整选择器，可以轻松地将其应用于单元格内的元素。