求助：将jQuery实现的星级评分系统转换为原生JavaScript

没问题！我帮你把jQuery版的星级评分转成原生JavaScript实现，逻辑完全匹配你的需求——点击星星时给当前及之前的星星加active类，同时移除后续星星的active类。咱们直接上代码和解释：

完整实现代码 #

HTML结构 #

先准备基础的星星容器和星星元素：

<div class="rating">
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
</div>

CSS样式 #

给星星加上基础样式和active状态的高亮效果：

.rating {
  font-size: 2rem;
  cursor: pointer;
}
.star {
  color: #ddd;
  transition: color 0.2s;
}
.star.active {
  color: #ffc107;
}

原生JavaScript代码 #

这部分完全替代你的jQuery逻辑：

// 获取所有星星元素
const stars = document.querySelectorAll('.star');

// 给每个星星绑定点击事件
stars.forEach(star => {
  star.addEventListener('click', function() {
    // 获取当前点击星星的索引（从0开始）
    const currentIndex = Array.from(stars).indexOf(this);
    
    // 遍历所有星星，根据索引判断添加/移除active类
    stars.forEach((starItem, index) => {
      if (index <= currentIndex) {
        starItem.classList.add('active');
      } else {
        starItem.classList.remove('active');
      }
    });
  });
});

关键逻辑解释 #

1. 获取元素：用document.querySelectorAll('.star')替代jQuery的$('.star')，得到所有星星的NodeList。
2. 绑定事件：用addEventListener('click', ...)替代jQuery的click()方法。
3. 获取当前索引：把NodeList转成数组（Array.from(stars)），再用indexOf(this)拿到点击星星的位置，对应jQuery的$(this).index()。
4. 类名操作：用classList.add('active')和classList.remove('active')替代jQuery的addClass()和removeClass()，这是原生DOM操作类名的标准方式。

如果你的原始jQuery代码有额外逻辑（比如默认评分、hover效果），可以告诉我，我再帮你补充对应的原生实现~

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