点击星星评分组件时颜色不发生变化问题如何解决

• 未在点击时先重置所有星星的默认颜色，切换低分时高星的高亮状态无法清除
• 从DOM获取的this.id为字符串类型，直接参与数值比较、运算存在隐式转换的不可靠问题
• 代码中星星图标实际是<i class="fas fa-star">元素，若存在针对.stars类的单独样式，会覆盖父元素.star设置的color属性
• 若未引入Font Awesome图标库，<i>标签无法渲染出星星图标，仅会显示你写在外面的*字符

JS代码 #

$(".star").on('click', function() {
  // 转成数字类型避免隐式转换问题
  const rating = Number(this.id);
  document.getElementById("stars").value = rating;
  // 先重置所有星星为默认颜色
  const allStars = document.querySelectorAll(".star");
  allStars.forEach(star => star.style.color = "#ccc");
  // 给选中星级及以下的星星设置高亮色
  for (let i = 0; i <= rating; i++) {
    document.getElementById(i).style.color = "goldenrod";
  }
});

CSS代码 #

.d-inline { display:inline }
.star { 
  cursor: pointer; 
  font-size: 24px; 
  color: #ccc; /* 新增默认灰色 */
}
/* 强制图标继承父元素颜色，避免被其他样式覆盖 */
.star .stars {
  color: inherit;
}

HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="ratingDiv">
  <div class="star d-inline" id="0"><i class="fas fa-star stars"></i></div>
  <div class="star d-inline" id="1"><i class="fas fa-star stars"></i></div>
  <div class="star d-inline" id="2"><i class="fas fa-star stars"></i></div>
  <div class="star d-inline" id="3"><i class="fas fa-star stars"></i></div>
  <div class="star d-inline" id="4"><i class="fas fa-star stars"></i></div>
</div>
<br>
<input type="text" id="stars" value="" name="stars" hidden>

如果不使用Font Awesome图标库，可删除<i>标签，直接在.star元素内保留*字符即可正常显示。

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