JS实现星级评分

css代码 

selected {
    color: #f5cc05;
    font-size: 30px;
    font-family: "微软雅黑 serif", serif;
}
.star1 {
    font-size: 25px;
    font-family: "微软雅黑 serif", serif;
}
.star2 {
    font-size: 25px;
    font-family: "微软雅黑 serif", serif;
}
.star3 {
     font-size: 25px;
    font-family: "微软雅黑 serif", serif;
 }
.star4 {
    font-size: 25px;
    font-family: "微软雅黑 serif", serif;
}
.star5 {
     font-size: 25px;
    font-family: "微软雅黑 serif", serif;
 }

 

html代码 

<div id="group" (click)="clickStar($event, commentDetail)">
                <span class="star1">☆</span>
                <span class="star2">☆</span>
                <span class="star3">☆</span>
                <span class="star4">☆</span>
                <span class="star5">☆</span>
            </div>

 

 JS代码

   /**
   * 选择星级评分
   * @param event    事件
   * @param comment  后台评价数据
   */
  clickStar (event, comment) {
    const group = document.getElementById('group');

    // 保存选择的星数
    let selectedStar = null;

    // 选择的星星数量
    let stars;

    if (event !== null && (comment === null || comment === undefined)) {
      stars = group.getElementsByClassName(event.target.className);
    } else {
      //  comment.grade为后台评分星级
      stars = group.getElementsByClassName('star' + comment.grade);
    }

    for (let i = 1; i <= 5; i++) {
      // 获取到选择的星类名称进行下一步处理
      if (stars[0].className === 'star' + i || stars[0].className === 'star' + i + ' selected') {
        // 先移除所有星已选中样式
        for (let j = 1; j <= 5; j++) {
          stars = group.getElementsByClassName('star' + j);
          stars[0].classList.remove('selected');
        }
        // 对选中以及前面的星添加选中样式 （例如： 五个星星选择第三个星星，当前我拿到的第三个星星名称，那就对前面所有星星加选中样式）
        for (let k = 1; k <= i; k++) {
          stars = group.getElementsByClassName('star' + k);
          stars[0].classList.add('selected');

          // 保存选择的星星数量，用作后续处理或提交后台。
          selectedStar = k;
        }
      }
    }
  }

效果展示