jquery实现星星评分变颜色效果

效果如图：

css代码

星星字体需要引入font-awesome  

html代码

 

  

  

JS代码

1、 点击事件

$(".fuwupinfen_star").click(function(){
//获取被点击的i标签的索引号
let m = $(this).index(".fuwupinfen_star");
for (var i = 0;i < 5; i++) {
//把索引号及之前的星星变成黄色
if( i <= m ){
$(".fuwupinfen_star:eq("+ i +")").removeClass("fa-star-o");
$(".fuwupinfen_star:eq("+ i +")").addClass("fa-star");
}else{//后面的就变空心
$(".fuwupinfen_star:eq("+ i +")").removeClass("fa-star");
$(".fuwupinfen_star:eq("+ i +")").addClass("fa-star-o");
}
}
})

2、hover状态

$(".fuwupinfen_star").hover(function(){

//获取被点击的i标签的索引号
let m = $(this).index(".fuwupinfen_star");
for (var i = 0;i < 5; i++) {
//把索引号及之前的星星变色
if( i <= m ){
$(".fuwupinfen_star:eq("+ i +")").removeClass("fa-star-o");
$(".fuwupinfen_star:eq("+ i +")").addClass("fa-star");
}else{//后面的就变空
$(".fuwupinfen_star:eq("+ i +")").removeClass("fa-star");
$(".fuwupinfen_star:eq("+ i +")").addClass("fa-star-o");
}

}
})