如何在Rails循环中为按钮设置唯一ID？

在Rails 4.2.5项目中，表格每行的操作按钮点击时，始终只能获取到第一行按钮的收据ID，无法正确传递对应行的ID。

原Ruby视图代码：

<div class="row " id = "list_receipt">
  <table class="table table-hover">
      <thead>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Company</th>
        <th scope="col">Signature of conformity</th>
        <th scope="col">Date of signature</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <% receipts.sort! { |a, b|  b.payment_month <=> a.payment_month }%>
      <% @receipts.each do |r|  %>
        <tr class="<%= row_color(r.consent)%>">
          <th><%= r.month %></th>
          <td><%= r.company_name %></td>
          <td><%= (r.consent ? 'In compliance': 'In disagreement' ) unless r.consent.nil? %></td>
          <td><%= r.date_consent unless r.date_consent.nil? %></td>
          <td>            
            <div class="input-group-btn">
              <%= button_tag 'Button', type: 'button', class: 'btn btn-succes', id:'viewreceipt_btn', value: r.id do %>
                <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                <%=r.month %>
              <%end%>
            </div>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

原CoffeeScript代码：

$(document).on 'click', '#viewreceipt_btn', (event) ->  
    alert $("#viewreceipt_btn").attr("value")

1. 修正视图代码：移除重复ID，改用class+语义化数据属性 #

HTML中id必须唯一，重复ID会导致DOM选择器只返回第一个匹配元素。我们将按钮的id替换为class，并使用data-*属性存储收据ID（比value更语义化）：

修改后的视图代码：

<div class="row " id="list_receipt">
  <table class="table table-hover">
      <thead>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Company</th>
        <th scope="col">Signature of conformity</th>
        <th scope="col">Date of signature</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <% receipts.sort! { |a, b|  b.payment_month <=> a.payment_month }%>
      <% @receipts.each do |r|  %>
        <tr class="<%= row_color(r.consent)%>">
          <th><%= r.month %></th>
          <td><%= r.company_name %></td>
          <td><%= (r.consent ? 'In compliance': 'In disagreement' ) unless r.consent.nil? %></td>
          <td><%= r.date_consent unless r.date_consent.nil? %></td>
          <td>            
            <div class="input-group-btn">
              <%= button_tag 'Button', type: 'button', class: 'btn btn-success viewreceipt-btn', data: { receipt_id: r.id } do %>
                <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                <%= r.month %>
              <% end %>
            </div>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

注：修复了原代码中btn-succes的拼写错误，改为btn-success

2. 修正CoffeeScript：绑定class事件，获取当前点击元素的数据 #

将事件绑定到class上，通过$(this)获取当前点击的按钮，读取对应的data-receipt-id：

$(document).on 'click', '.viewreceipt-btn', (event) ->  
  # 获取当前按钮绑定的收据ID
  receiptId = $(this).data('receipt-id')
  # 如果坚持使用value属性，可替换为：receiptId = $(this).val()
  alert receiptId

内容的提问来源于stack exchange，提问作者Lucho