简单的星级评价

html

<div class="star">
　　<a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><span class="star_word"></span>
</div>

css

*{ padding:0; margin:0;}
.star{
width:500px;
margin:100px auto;}
.star a{
display:inline-block;
background:#FF8000;
margin-right:10px;
width:16px; height:16px; transition:all 0.3s;}
.star .hover{ background:#0F0;}
.star .on{ background:#B50000;}
.star_word{ display:inline-block;}

js

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>

var wordIntro={
　　myIntro:["差","一般","好","很好","非常好"]//评价文字调用
}
;(function(){
　　$.fn.starIntro=function(){
　　　　This =this;
　　　　var attr=[];//变量存储，方便调用点击之后储存的值，这里没有应用push到数组，是由于数字只能是唯一，方便直接调用，查看方式见下attr调用
　　　　$(This).find('a')
　　　　.mouseenter(function(){//鼠标经过执行事件
　　　　　　var index =$(this).index()+1;
　　　　　　$(this).parent().find('a').removeClass('on');//清除所有click事件的颜色
　　　　　　$(this).parent().find('a:lt('+index+')').addClass('hover');
　　　　})
　　　　.mouseleave(function(){//鼠标离开执行事件
　　　　　　$(this).parent().find('a').removeClass('hover');
　　　　　　$(this).parent().find('a:lt('+attr[0]+')').addClass('on');//没有执行click时值仍然保持在上次的click变量中
　　　　　　})

　　　　.click(function(){
　　　　　　var index=$(this).index()+1;
　　　　　　attr[0]=index;//储存变量，方便调用
　　　　　　$(This).find('.star_word').html(wordIntro.myIntro[index-1]);
　　　　　　$(this).parent().find('a').removeClass('on');
　　　　　　$(this).parent().find('a:lt('+index+')').addClass('on');
　　　　})
　　　　}
})(jQuery)
$(function(){
　　$('.star').starIntro();
})