星级评分的实现

最新推荐文章于 2024-08-27 13:32:57 发布

xm2by

最新推荐文章于 2024-08-27 13:32:57 发布

阅读量3.5k

点赞数

分类专栏： javascript vue 文章标签：星级评分 js vue

本文链接：https://blog.csdn.net/XuM222222/article/details/104395116

版权

本文介绍了如何实现星级评分功能，详细阐述了原生JS和Vue两种版本的实现方法。在鼠标移入、离开和点击星星时，系统能动态更新激活状态。Vue版中，还封装了一个StarEvaluation组件，支持只读和可写两种模式。

摘要由CSDN通过智能技术生成

星级评分的实现

星级评分是一种常见的打分方式，一般满分为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