如何在Rails 7+Bootstrap（无jQuery）的评论表单中添加星级评分输入

直接给你一套适配现有代码的解决方案，不用改模型和控制器，只需要修改表单、加样式和少量原生JS：

1. 替换表单里的评分输入 #

把原表单中的text_field换成collection_radio_buttons，生成1-5的单选选项，同时隐藏原生按钮，用你现有展示评分的SVG星星做交互元素：

修改新评论/编辑评论表单的评分部分：

<div class="field form-group">
  <%= f.label :rating, "Rate your experience", style: "display: block" %>
  <div class="star-rating" id="star-rating">
    <%= f.collection_radio_buttons :rating, (1..5).to_a, :to_s, :to_s, class: "d-none" do |b| %>
      <%= b.label class: "star-rating__star" do %>
        <%= b.radio_button %>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="#DEDEDE"
          width="24"
          height="24"
          class="star-icon">
          <path
            fill-rule="evenodd"
            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
            clip-rule="evenodd" />
        </svg>
      <% end %>
    <% end %>
  </div>
  <%# 保留错误提示 %>
  <% if @review.errors[:rating].any? %>
    <div class="text-danger mt-2">
      <%= @review.errors[:rating].join(", ") %>
    </div>
  <% end %>
</div>

2. 添加CSS样式 #

在你的Bootstrap样式文件（比如app/assets/stylesheets/application.bootstrap.scss）里加这段样式，实现hover和选中状态的视觉反馈：

.star-rating {
  display: flex;
  gap: 0.5rem;
  cursor: pointer;

  &__star {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
  }

  .star-icon {
    transition: fill 0.2s ease;
  }

  // Hover时，当前及之前的星星变黄
  &:hover .star-icon {
    fill: #fbbc04;
  }
  &__star:hover ~ .star-rating__star .star-icon {
    fill: #DEDEDE;
  }

  // 选中后，当前及之前的星星保持黄色
  .star-rating__star input:checked ~ .star-icon,
  .star-rating__star input:checked ~ .star-rating__star .star-icon {
    fill: #fbbc04;
  }
}

3. 加原生JS处理交互 #

用原生JS实现hover预览和选中状态初始化，不用jQuery，直接在表单页面加这段脚本：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const starRating = document.getElementById('star-rating');
    if (!starRating) return;

    const stars = starRating.querySelectorAll('.star-rating__star');
    const inputs = starRating.querySelectorAll('input[type="radio"]');

    // 编辑页面初始化选中的星星
    const checkedInput = starRating.querySelector('input[type="radio"]:checked');
    if (checkedInput) {
      highlightStars(parseInt(checkedInput.value));
    }

    // 高亮指定数量的星星
    function highlightStars(rating) {
      stars.forEach((star, index) => {
        const icon = star.querySelector('.star-icon');
        icon.setAttribute('fill', index < rating ? '#fbbc04' : '#DEDEDE');
      });
    }

    // 绑定事件
    stars.forEach((star, index) => {
      star.addEventListener('mouseenter', () => highlightStars(index + 1));
      star.addEventListener('mouseleave', () => {
        const checked = starRating.querySelector('input[type="radio"]:checked');
        highlightStars(checked ? parseInt(checked.value) : 0);
      });
      star.addEventListener('click', () => highlightStars(index + 1));
    });
  });
</script>

功能验证 #

• 点击任意星星，对应的单选按钮会被选中，表单提交时rating参数能正常传给控制器
• 编辑评论时，会自动高亮之前选择的星星
• 鼠标hover时实时预览评分效果
• 原有的表单验证逻辑完全生效（比如没选评分会显示错误提示）

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