css - 星级评分渲染而不是简单的 select_tag 下拉渲染

Question

我有这个跨度:

<span class="rating">
  <tr>
    <td>Quality</td>
    <td><%= select_tag :quality,  options_for_select(["1", "2", "3", "4", "5"]), { multiple: false } %></td>
  </tr>
  <tr>
    <td>Cost</td>
    <td><%= select_tag :cost,  options_for_select(["1", "2", "3", "4", "5"]), { multiple: false } %></td>
  </tr>
  <tr>
    <td>Time</td>
    <td><%= select_tag :time,  options_for_select(["1", "2", "3", "4", "5"]), { multiple: false } %></td>
  </tr>
  <tr>
    <td>Experience</td>
    <td><%= select_tag :experience,  options_for_select(["1", "2", "3", "4", "5"]), { :multiple => false } %></td>
  </tr>
  <tr>
    <td>Communication</td>
    <td><%= select_tag :communication,  options_for_select(["1", "2", "3", "4", "5"]), { :multiple => false } %></td>
  </tr>
</span>

用于设置用户的一些评分参数。它只呈现在下拉列表中，这并不好。我决定使用基于星级的评级，通过一些搜索我找到了这个 nice article .

我确实正确放置了所有 CSS，我可以看到星星应该显示并呈现为:

<span class="rating">
<input type="radio" class="rating-input"
    id="rating-input-1-5" name="rating-input-1">
<label for="rating-input-1-5" class="rating-star"></label>
<input type="radio" class="rating-input"
    id="rating-input-1-4" name="rating-input-1">
<label for="rating-input-1-4" class="rating-star"></label>
<input type="radio" class="rating-input"
    id="rating-input-1-3" name="rating-input-1">
<label for="rating-input-1-3" class="rating-star"></label>
<input type="radio" class="rating-input"
    id="rating-input-1-2" name="rating-input-1">
<label for="rating-input-1-2" class="rating-star"></label>
<input type="radio" class="rating-input"
    id="rating-input-1-1" name="rating-input-1">
<label for="rating-input-1-1" class="rating-star"></label>
</span>

我尝试了几种方法，但不确定如何更改它:<%= select_tag :quality, options_for_select(["1", "2", "3", "4", "5"]), { multiple: false } %> radio ，星星，输入。

我最接近的是:

    <td>
      <% [ '1', '2', '3', '4', '5' ].each do |quality| %>
        <br><%= radio_button_tag 'quality', quality, @quality == quality, class: "rating-input" %>
        <%= label_tag "rating_#{quality}", quality.humanize %>
        <label for="rating-input-1-5" class="rating-star"></label>
      <% end %>
    </td> 

非常感谢任何指导。

Answer 1

尝试以下操作:

1..5.each do |rate|
  radio_button_tag 'quality', quality, resource.quality == quality, class: 'rating-input', id: "rating_quality_#{rate}"
  label_tag "rating_quality_#{rate}"
end

我没有包括 <%%>标签以提高可读性。