模拟星星评分

<style>
*{
margin: 0;
padding: 0;
}
.start-div{
width: 18.75rem;
margin: 50px auto;
}
.clearfix:after{
content: "";
display: block;
clear: both;
height: 0;
}
.starts{
float: left;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #E2E2E2;
margin: 0 10px;
transition: all .3s;
}
.active{
width: 10px;
height: 10px;
background-color: orange;
}
</style>

<div class="start-div clearfix">
<span class="starts"></span>
<span class="starts"></span>
<span class="starts"></span>
<span class="starts"></span>
<b class="select">请选择您的评分</b>
</div>

<script type="text/javascript">
var stauts = true;//设置未选中的状态
var index = 0;
if(stauts){//如果点击没有评分则鼠标滑过有样式出现，离开取消样式
$('.starts').bind({//绑定划过高亮样式
mouseenter: function(e) {
index = $(this).index();
for(var i = 0;i<= index; i++){
$('.starts').eq(i).addClass('active');
$('.select').html('您的评分为'+ (index+1)+'分');
}

},
mouseleave: function(e) {
$('.starts').removeClass('active') ;
},
})
}
//点击确定打分
$('.starts').on('click',function(){
stauts = false;
for(var i = 0;i<= index; i++){
$('.starts').eq(i).addClass('active')
}
if(!stauts){
$('.starts').unbind('mouseenter').unbind('mouseleave');
alert('谢谢你的评分');
}
})
</script>