星级评分的实现

星级评分的实现

星级评分是一种常见的打分方式，一般满分为5颗星，用户通过勾选星星的数量来给产品的某一维度进行打分，效果如下图所示：

当鼠标移动到某个星星上面时，当前星星及其前面的星星需处于激活状态；当鼠标移开时，所有星星恢复原状；只有当鼠标点击某个星星时，当前星星及其前面的星星处于激活状态，评分生效，此时鼠标移开时，星星状态不用恢复原状。

从上述分析可以看出，用到了鼠标进入、离开事件、以及点击事件，当移入到或点击某个星星时，需要确定出当前触发的是第几个星星，然后将当前星星及其前面的星星置为激活状态；离开星星时，如果之前没有触发点击事件，则需要将星星状态还原，具体实现如下：

原生js版

用html画出五个星星：

<div class="star-evaluation-wrapper">
  <span class="star">&#9733;</span>
  <span class="star">&#9733;</span>
  <span class="star">&#9733;</span>
  <span class="star">&#9733;</span>
  <span class="star">&#9733;</span>
</div>
<div class="result"></div>

星星的样式：

star{
   
  font-size: 18px;
  color: #666;
}
.star.active{
   
  color: #F78233;
}

评分逻辑：

const resultEle = document.querySelector('.result')
// 全局变量，用于存放用户的评分
let score = 0
const starWrapperEle = document.querySelector('.star-evaluation-wrapper')
const starEle = starWrapperEle.querySelectorAll('.star')
// 遍历每个星星元素，为每个星星添加索引、鼠标进入事件(onmouseenter)、以及点击事件
// 利用事件代理为星星容器添加鼠标移出事件（onmouseleave）
for (let i = 0; i < starEle.length; i++) {
   
  // 添加索引
  starEle[i].index = i
  // 添加鼠标进入事件
  starEle