前端面试官让你实现淘宝评分的效果

我们要实现的效果：

 <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

分析如下：
1.鼠标移入，鼠标当前的li和左边的li是实心的，右边是空心的
2.鼠标移出，评分恢复旧的评分
3.鼠标点击当前li，评分停止
实现思路：
注册鼠标的移入移出、点击一共三个事件。
1.移入的时候，让当前的li和左边的li变成实心(通过修改文本实现的)
2.点击的时候，把一个分数定好，当前点击的是第几个，就是多少分
3.移出，把分数左边的都变成红色，右边的都变成白色
实现代码如下：

// 获取元素
let lis = $('.comment > li');
// 定义一个变量，保存当前是多少分
let score = 0;// 一开始是0份
// 鼠标移入
lis.on('mouseover',function(){
  // 直接把当前和左边的都变成实心
  // 先得到当前是第几个
  let index = $(this).index();
  // 遍历，
  lis.each((i,e)=>{
    // 如果索引比当前的小，都是实心的
    if(i <= index){
      $(e).text('★');
    }// 否则就是空心的
    else {
      $(e).text('☆');
    }
  })
})
// 点击
.on('click',function(){
  // 点击的是哪个，分数就是多少
  let current = $(this).index();// 得到索引
  // 索引和分数相比，索引比分数小1，要补回来
  score = current + 1;
})
// 鼠标移出
.on('mouseout',function(){
  // 恢复到上一次的分数
  // 上次分数左边的都是实心，右边的都是空心
  lis.each((i,e)=>{
    if(i < score){
      $(e).text('★');
    }else {
      $(e).text('☆');
    }
  })
})

不要追求完美，你只是一个普通人。