原生jquery实现星级评分功能，鼠标滑过点亮星星

背景：首先，这个功能是很常见的一个效果，无论是PC端还是移动端，评分和反馈都屡见不鲜，但是大多数实现都是直接引用组件库里的组件来实现的，而我今天要给大家分享的是通过原生js自己手写实现的同样效果，针对一些老项目还是使用的到的。

---

效果图：

核心代码（由于这个功能整体还是比较复杂的，所以只附了滑过星星高亮的代码，供大家参考，至于其他功能都很容易实现的） 

html:

<div class = "bit-com">
    <span class = "bit"></span>
    <span class = "bit"></span>
    <span class = "bit"></span>
    <span class = "bit"></span>
    <span class = "bit"></span>
    <span class = "bit"></span>
    <span class = "bit"></span>
    <span class = "bit"></span>
    <span class = "bit"></span>
    <span class = "bit"></span>
</div>

css: 

.bit-com .bit {
    display: inline-block;
    width: 32px;
    height: 24px;
    background: url(../images/white.png) no-repeat;
    background-size: 24px 24px;
}

.bit-com .bit.on {
    background: url(../images/blue.png) no-repeat;
    background-size: 24px 24px;
}

.bit-com .bit {
    background: url(../images/blue.png) no-repeat;
    background-size: 24px 24px;
}

 js:

//鼠标移入
$(document).on("mouseenter", ".bit-com .btn", function() {
    //移除所有星星的高亮
    $(".bit-com .bit").removeClass("active");
    //记录当前鼠标滑动星星停止时，一共滑过的星星数量
    var _ind = $(this).index() * 1 + 1;
    //从停止位置开始(包括停止位置)，将前面的所有星星点亮
    for(var i = 0; i < _ind; i++) {
        $(".bit-com .bit").eq(i).addClass("on");
    }
})

var activeInd;
//鼠标点击
$(document).on("click", ".bit-com .btn", function() {
    //移除所有星星的高亮
    $(".bit-com .bit").removeClass("active");
    //记录当前鼠标滑动星星停止时，一共滑过的星星数量
    var _ind = $(this).index() * 1 + 1;
    //保存鼠标点击的位置
    activeInd = _ind;
    //从停止位置开始(包括停止位置)，将前面的所有星星点亮
    for(var i = 0; i < _ind; i++) {
        $(".bit-com .bit").eq(i).addClass("active");
    }
})

//鼠标移出
$(document).on("mouseleave", ".bit-com .btn", function() {
    //移除所有星星的高亮
    $(".bit-com .bit").removeClass("on");
    //从停止位置开始(包括停止位置)，将前面的所有星星点亮
    for(var i = 0; i < activeInd; i++) {
        $(".bit-com .bit").eq(i).addClass("active");
    }
})

总结：其实整个评分功能最核心的地方就是通过合理的js逻辑实现鼠标滑过，点击，滑出从而让星星高亮的效果。而代码中也是通过添加和删除特定的类名来实现此功能的，还是比较好理解的。