JavaScript星级评分开发问题：默认5星可降1星，升星逻辑实现困惑

嘿，我看你已经搞定了从高星降到低星的逻辑，升星的问题其实是循环范围和判断逻辑没处理到位，还忽略了字符串与数字比较的小细节，我来帮你修正一下：

原代码的问题分析 #

1. 类型不匹配：starselect是从id属性获取的字符串，直接和数字j比较会出问题（比如字符串"3"和数字5比较，会按字符编码判断，结果不符合预期）；
2. 升星逻辑缺失：你原代码里的if判断只处理了循环结束后的单个j值，没有遍历所有需要填充的星星，所以从1星升到5星时，前面的星星不会被加上选中类。

修正后的代码（直观循环版） #

$(".star").click(function(){
  // 把获取到的id转成整数，避免类型比较错误
  var starselect = parseInt($(this).attr("id"));
  
  // 填充当前点击及之前的所有星星
  for(var i = 1; i <= starselect; i++){
    $("#"+i).addClass("starchecked");
  }
  
  // 取消当前点击之后的所有星星选中状态
  for(var j = starselect + 1; j <= 5; j++){
    $("#"+j).removeClass("starchecked");
  }
  
  $(".review-star").attr("data-rating",starselect);
});

更简洁的jQuery批量处理版 #

如果想减少循环代码，也可以用jQuery选择器直接批量操作，效率更高：

$(".star").click(function(){
  var starselect = parseInt($(this).attr("id"));
  
  // 先移除所有星星的选中类，再给符合条件的星星添加选中类
  $(".star")
    .removeClass("starchecked")
    .filter(function(){
      return parseInt($(this).attr("id")) <= starselect;
    })
    .addClass("starchecked");
  
  $(".review-star").attr("data-rating",starselect);
});

这样不管是从1星升到5星，还是从5星降到1星，所有星星的状态都能正确更新啦～

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