电商网站JavaScript星级评分功能问题：重复点击同一星级无法重置评分文本

嗨，我仔细看了你的星级评分代码，问题其实很明显——你在点击事件里的逻辑漏掉了关键步骤！

当你点击已经选中的星级时，代码里确实把selectedStars设成了0，但紧接着就return了，这导致后面更新星星状态和调用valueDetectOfReview的代码根本没执行。所以评分文本star-value自然不会变回'-'，星星也还是保持选中的状态。

修复后的代码 #

先看调整后的JavaScript部分：

const stars = document.querySelectorAll(".stars");
let selectedStars = 0;

stars.forEach(star => {
  star.addEventListener("mouseover", () => {
    const nthStar = parseInt(star.id.split("-")[1]);
    stars.forEach((s, index) => {
      s.textContent = (index < nthStar) ? "★" : "☆";
    });
  });

  star.addEventListener("mouseleave", () => {
    stars.forEach((s, index) => {
      s.textContent = (index < selectedStars) ? "★" : "☆";
    });
  });

  star.addEventListener("click", () => {
    const nthStar = parseInt(star.id.split("-")[1]);
    // 核心修复：去掉return，让后续的更新逻辑都能执行
    if (nthStar === selectedStars) {
      selectedStars = 0;
    } else {
      selectedStars = nthStar;
    }
    // 不管是重置还是选新星级，都更新星星状态和评分文本
    stars.forEach((s, index) => {
      s.textContent = (index < selectedStars) ? "★" : "☆";
    });
    valueDetectOfReview(selectedStars);
  });
});

const review = document.querySelector('.star-value');
function valueDetectOfReview(starNumber) {
  switch (starNumber) {
    case 0:
      review.textContent = '-';
      break;
    case 1:
      review.textContent = 'Very Poor';
      break;
    case 2:
      review.textContent = 'Poor';
      break;
    case 3:
      review.textContent = 'Average';
      break;
    case 4:
      review.textContent = 'Good';
      break;
    case 5:
      review.textContent = 'Excellent';
      break;
    default:
      break;
  }
}

对应的HTML部分保持不变：

<div class="rating">
  <div class="section-header">
    <p>Rating</p>
  </div>
  <div class="section-main">
    <span class="stars" id="star-1">&#9734;</span>
    <span class="stars" id="star-2">&#9734;</span>
    <span class="stars" id="star-3">&#9734;</span>
    <span class="stars" id="star-4">&#9734;</span>
    <span class="stars" id="star-5">&#9734;</span>
  </div>
  <div class="star-value">-</div>
</div>

修复说明 #

• 移除了点击事件里的return语句，这样当重置selectedStars为0后，后续的星星状态更新和valueDetectOfReview调用都会正常执行
• valueDetectOfReview函数里的case 0分支本来就正确处理了文本重置为'-'的逻辑，现在能被正常触发
• 星星状态也会在重置时变回全空心，完全符合你的需求

内容来源于stack exchange