星级评定不是预期的行为

Question

我知道我使用相同的ID和名称，以及可能导致此问题的原因。

星级评分部分是：

<span class="rating">
  <tr>
    <td>Quality</td>
    <td>
      <span class="rating">
      <% (1..5).each_with_index do |quality, i| %>
        <%= radio_button_tag "rating-input-1-#{i+1}", quality, endorsement.quality == quality, class: 'rating-input', id: "rating-input-1-#{i+1}" %>
        <%= label_tag "rating-input-1-#{i+1}", nil,  class: 'rating-star' %>
      <% end %>
    </span>
    </td> 
  </tr>
  <tr>
    <td>Cost</td>
    <td>
      <span class="rating">
      <% (1..5).each_with_index do |cost, i| %>
        <%= radio_button_tag "rating-input-1-#{i+1}", cost, endorsement.cost == cost, class: 'rating-input', id: "rating-input-1-#{i+1}" %>
        <%= label_tag "rating-input-1-#{i+1}", nil,  class: 'rating-star' %>
      <% end %>
    </span>
    </td>
  </tr>
  <tr>
    <td>Time</td>
    <td>
      <span class="rating">
      <% (1..5).each_with_index do |time, i| %>
        <%= radio_button_tag "rating-input-1-#{i+1}", time, endorsement.time == time, class: 'rating-input', id: "rating-input-1-#{i+1}" %>
        <%= label_tag "rating-input-1-#{i+1}", nil,  class: 'rating-star' %>
      <% end %>
    </span>
    </td>
  </tr>
  <tr>
    <td>Experience</td>
    <td>
      <span class="rating">
      <% (1..5).each_with_index do |experience, i| %>
        <%= radio_button_tag "rating-input-1-#{i+1}", experience, endorsement.experience == experience, class: 'rating-input', id: "rating-input-1-#{i+1}" %>
        <%= label_tag "rating-input-1-#{i+1}", nil,  class: 'rating-star' %>
      <% end %>
      </span>
    </td>
  </tr>
  <tr>
    <td>Communication</td>
    <td>
      <span class="rating">
      <% (1..5).each_with_index do |communication, i| %>
        <%= radio_button_tag "rating-input-1-#{i+1}", communication, endorsement.communication == communication, class: 'rating-input', id: "rating-input-1-#{i+1}" %>
        <%= label_tag "rating-input-1-#{i+1}", nil,  class: 'rating-star' %>
      <% end %>
      </span>
    </td>
  </tr>
</span>

显示为：

我确实放置了一些CSS styles以使其按预期工作，并呈现为this (too long to place here)。

当我点击任何一个星星时，它只会填充我选择的某些星星，然后我不能从不同的评级方面选择任何其他星星。我对html标签没有经验，但是向正确的方向提示或指导肯定会让我理解/继续。

Answer 1

我发现了你的问题：

您在html中使用相同的名称 标签。

**这就是为什么每次点击它只会影响第一行...

已修复DEMO

示例

在你的第二个.rating范围内你需要替换它：

<input class="rating-input" id="rating-input-1-1" name="rating-input-1-1" type="radio" value="1" />
<label class="rating-star" for="rating-input-1-1">Rating-input-1-1</label>

到此：

 <input class="rating-input" id="rating-input-2-1" name="rating-input-2-1" type="radio" value="1" />
 <label class="rating-star" for="rating-input-2-1">Rating-input-2-1</label>

使用css的好解决方案只有btw。

Answer 2

您已将它们命名为同名：rating-input-1- 将它们更改为不同的名称。 rating-input-2-等......

此外 - 问题是单选按钮的名称和ID之间的差异。您可能需要故意将ID设置为rating-input-2-#{i}，但您还需要将行中所有五颗星的名称设置为rating-input-2 ...该名称对单选按钮进行分组， id指定个人

例如：

<%= radio_button_tag "rating-input-2", cost, endorsement.cost == cost, class: 'rating-input', id: "rating-input-2-#{i+1}" %>