优化JS评分函数：移除兄弟元素关联，实现单行独立评分

嘿，我来帮你搞定这个单行评分的需求！核心问题就是原来的函数在操作星星时是全局遍历所有元素，现在我们要把所有操作限制在当前评分所在的行内，彻底移除跨行的兄弟元素逻辑。

修改后的完整代码 #

function rating() {
  // 用事件委托绑定到行元素，支持动态生成的评分行
  $('li').on('click mouseenter mouseleave', '.starRating', function(e) {
    // 定位到当前操作的评分所在的行
    const $currentRow = $(this).closest('li');
    // 只获取当前行内的所有评分星星
    const $starsInRow = $currentRow.find('.starRating');
    // 只获取当前行内的评分值输入框
    const $ratingInput = $currentRow.find('input.rating-value');
    // 获取当前行的已有评分（默认0）
    const currentRating = parseInt($ratingInput.val()) || 0;

    // 仅遍历当前行内的星星，更新状态
    $starsInRow.each(function() {
      const starRating = parseInt($(this).data('rating'));
      
      // 点击星星时，更新当前行的评分值
      if (e.type === 'click') {
        $ratingInput.val(starRating);
      }

      // 确定当前要激活的评分（悬停时用当前星星的评分，其他情况用已有评分）
      const activeRating = e.type === 'mouseenter' ? starRating : currentRating;

      // 切换星星的样式类
      if (activeRating >= starRating) {
        $(this).removeClass('fa-star-o').addClass('fa-star');
      } else {
        $(this).removeClass('fa-star').addClass('fa-star-o');
      }
    });
  });
}

关键修改说明 #

• 移除全局元素选择：不再用$('li #starRating')全局抓取所有星星，而是通过$(this).closest('li')定位到当前操作的行，只处理该行内的元素。
• 替换跨行兄弟元素查找：把原来的$star_rating.siblings('input.rating-value')换成$currentRow.find('input.rating-value')，确保只获取当前行的评分输入框，完全不影响其他行。
• 修复ID重复问题：把原来的id="starRating"改成class="starRating"，因为HTML中ID必须唯一，重复ID会导致JS选择器异常（这是原来代码里的潜在问题）。
• 事件委托优化：把事件绑定到li元素上，即使后续动态添加新的评分行，也能自动生效，不需要重新绑定事件。

配套的HTML结构示例 #

<!-- 每一行是独立的评分模块 -->
<li>
  <i class="starRating fa fa-star-o" data-rating="1"></i>
  <i class="starRating fa fa-star-o" data-rating="2"></i>
  <i class="starRating fa fa-star-o" data-rating="3"></i>
  <i class="starRating fa fa-star-o" data-rating="4"></i>
  <i class="starRating fa fa-star-o" data-rating="5"></i>
  <input type="hidden" class="rating-value" value="0">
</li>
<li>
  <!-- 另一行独立的评分 -->
  <i class="starRating fa fa-star-o" data-rating="1"></i>
  ...
  <input type="hidden" class="rating-value" value="0">
</li>

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