鼠标悬停星级图标时switch语句执行异常问题求助

当鼠标悬停在星级图标上时，handleSelect函数仅在首次悬停的图标上执行一次；虽然console.log(event.target.id)能正常输出当前悬停图标的ID，但handleSelect(event.target.id)只有第一次生效。如果移除switch语句中的return语句，代码会直接执行到第五个case，不会响应当前悬停的对应case。

问题根源 #

1. 原handleSelect函数依赖冗余的switch逻辑，每个case重复操作所有星级的类，当星级已处于目标状态时，classList.add/remove不会产生视觉变化，导致误以为函数未执行。
2. switch语句依赖return终止执行，移除return后会因缺少break继续执行后续case，最终触发最后一个case的逻辑。
3. 单独绑定每个元素的事件，代码冗余且易出错。

优化后的代码 #

JavaScript

window.onload = function() {
  // 一次性获取所有星级元素
  const stars = document.querySelectorAll('.ratings .fa-star');
  // 记录初始已选中的星级数量，用于鼠标离开后恢复状态
  const initialCheckedCount = document.querySelectorAll('.ratings .checked').length;

  const handleSelect = function(targetIndex) {
    // 先移除所有星级的checked类
    stars.forEach(star => star.classList.remove('checked'));
    // 给当前星级及之前的所有星级添加checked类
    for (let i = 0; i <= targetIndex; i++) {
      stars[i].classList.add('checked');
    }
  }

  // 给每个星级绑定mouseenter事件（仅在进入元素时触发一次）
  stars.forEach((star, index) => {
    star.addEventListener('mouseenter', () => {
      handleSelect(index);
    });
  });

  // 鼠标离开星级区域后恢复初始状态（可选）
  document.querySelector('.ratings').addEventListener('mouseleave', () => {
    stars.forEach((star, index) => {
      if (index < initialCheckedCount) {
        star.classList.add('checked');
      } else {
        star.classList.remove('checked');
      }
    });
  });
}

保留原HTML和CSS

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<div class="ratings">
  <span class="fa fa-star checked" id="first"></span>
  <span class="fa fa-star checked" id="second"></span>
  <span class="fa fa-star checked" id="third"></span>
  <span class="fa fa-star checked" id="fourth"></span>
  <span class="fa fa-star" id="fifth"></span>
</div>

.checked {
  color: yellow;
}

优化点说明 #

• 使用querySelectorAll批量获取星级元素，避免单独获取每个元素的冗余代码。
• 通过元素索引确定高亮范围，彻底替代冗余的switch逻辑，代码更简洁易维护。
• 用mouseenter替代mouseover，避免重复触发事件（mouseenter仅在鼠标进入元素时触发一次）。
• 新增鼠标离开恢复初始状态的逻辑，提升用户体验。

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