如何用JavaScript/jQuery实现星级评分鼠标移出后清除星星颜色

你的代码目前缺少鼠标移出时清除选中状态的逻辑，同时存在索引计算错误（表单中的CSRF令牌输入会导致星星按钮的索引偏移）。以下是修正后的纯JavaScript实现方案：

修正后的JavaScript代码 #

(function($) {
  "use strict";

  $(document).ready(function() {
    const form = document.querySelector('.rate-form');
    const stars = form.querySelectorAll('button'); // 仅选择星星按钮元素

    // 高亮指定索引及之前的所有星星
    const handleStarSelect = (activeIndex) => {
      stars.forEach((star, index) => {
        if (index <= activeIndex) {
          star.classList.add('checked');
        } else {
          star.classList.remove('checked');
        }
      });
    };

    // 清除所有星星的高亮状态
    const clearStarSelection = () => {
      stars.forEach(star => star.classList.remove('checked'));
    };

    // 为每个星星绑定悬停事件
    stars.forEach((star, index) => {
      // 鼠标悬停时触发高亮
      star.addEventListener('mouseover', () => {
        handleStarSelect(index);
      });

      // 鼠标移出时清除高亮
      star.addEventListener('mouseout', clearStarSelection);
    });

    // 表单区域鼠标移出时清除高亮（防止鼠标离开整个评分区后仍保留状态）
    form.addEventListener('mouseout', (e) => {
      if (!form.contains(e.relatedTarget)) {
        clearStarSelection();
      }
    });
  });
})(jQuery);

保留原CSS样式 #

.checked {
  color: #f2994a;
}

原HTML结构无需修改 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<div class="user-rating">
  <form action="" method="post" class="rate-form">
    {% csrf_token %}
    <button type="submit" class="fa fa-star fa-lg" id="star-first"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-second"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-third"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-fourth"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-fifth"></button>
  </form>
  <div id="confirm-score"></div>
</div>

关键修正说明 #

• 索引错误修复：使用querySelectorAll('button')直接选中星星按钮，避免CSRF令牌输入干扰索引计算。
• 鼠标移出逻辑：新增clearStarSelection函数，绑定到每个星星的mouseout事件，确保鼠标离开时清除所有高亮状态。
• 表单级状态重置：为表单添加mouseout事件监听，防止鼠标离开整个评分区域后仍保留高亮效果。

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