jQuery星级评分异常：评分提示信息显示在全部项目上

看起来你遇到的问题是页面上有多个评分组件时，评分第一个项目后，所有未评分项目的提示框都会同步显示相同消息对吧？这是因为你的代码里用了全局选择器，没有限定只操作当前评分组件内的元素，我来帮你一步步修复这个问题～

问题根源分析 #

1. 重复ID违规：你生成多个评分组件时都用了<ul id="stars">，但HTML规范里id必须是唯一的，重复id会导致选择器逻辑混乱。
2. 全局选择器覆盖所有元素：
   • 点击事件中$('#stars li.selected')会选中页面上所有id为stars的列表下的选中星星，拿到的不是当前组件的评分。
   • responseMessage函数里的$('.success-box')会选中页面上所有提示框，所以每次评分都会让所有组件的提示框显示消息。

修复步骤 #

1. 修正HTML结构的ID问题

首先把生成HTML时的<ul id="stars">改成<ul class="stars">，用class来标识评分列表，适配多个组件的场景：

'<section class ="rating-widget"><div class="rating-stars text-center"><ul class="stars"><li class="star" title="Poor" data-value="1"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Fair" data-value="2"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Good" data-value="3"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Excellent" data-value="4"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Perfect" data-value="5"><i class="fa fa-star fa-fw"></i></li></ul></div>' + '<div class="success-box"><div class="clearfix"></div><div class="text-message"></div><div class="clearfix"></div></div></section>';

2. 改用事件委托绑定交互逻辑

因为是动态生成的组件，用事件委托绑定在父元素上，确保所有新增的评分组件都能触发交互：

/* 1. 鼠标悬停的视觉反馈 */
$(document).on('mouseover', '.stars li', function() {
  var onStar = parseInt($(this).data('value'), 10);
  // 只操作当前评分组件内的星星
  $(this).closest('.stars').children('li.star').each(function(e) {
    if (e < onStar) {
      $(this).addClass('hover');
    } else {
      $(this).removeClass('hover');
    }
  });
}).on('mouseout', '.stars li', function() {
  $(this).closest('.stars').children('li.star').removeClass('hover');
});

3. 修复点击事件的评分逻辑和提示框更新

修改点击事件，确保所有操作都限定在当前评分组件内部：

/* 2. 点击评分的逻辑 */
$(document).on('click', '.stars li', function() {
  var onStar = parseInt($(this).data('value'), 10);
  var $stars = $(this).closest('.stars').children('li.star');
  
  // 清除当前组件内的选中状态
  $stars.removeClass('selected');
  // 为选中的星星添加状态
  for (i = 0; i < onStar; i++) {
    $($stars[i]).addClass('selected');
  }
  
  // 获取当前组件的评分值（仅查找当前组件内的选中星星）
  var ratingValue = parseInt($stars.filter('.selected').last().data('value'), 10);
  var msg = "";
  if (ratingValue > 1) {
    msg = "Thanks! You rated this " + ratingValue + " stars.";
  } else {
    msg = "We will improve ourselves. You rated this " + ratingValue + " stars.";
  }
  
  // 只更新当前评分组件对应的提示框
  var $currentSuccessBox = $(this).closest('.rating-widget').find('.success-box');
  $currentSuccessBox.fadeIn(200);
  $currentSuccessBox.find('.text-message').html("<span>" + msg + "</span>");
});

4. 移除全局的responseMessage函数

现在我们已经在点击事件里直接操作对应组件的提示框了，原来的全局函数可以删掉，避免再次出现全局操作的问题。

问题现象示意图 #

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