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

效果如图：



css代码

星星字体需要引入font-awesome   <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>

html代码

 <i class="fa fa-star-o fuwupinfen_star"></i>

<i class="fa fa-star-o fuwupinfen_star"></i>

 <i class="fa fa-star-o fuwupinfen_star"></i> 

<i class="fa fa-star-o fuwupinfen_star"></i>

 <i class="fa fa-star-o fuwupinfen_star"></i> 

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");
}

}
})