Jquery 星级评价功能(简单版)的实现代码
本文导语: 1、页面内容部分 2、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{ ba...
1、页面内容部分
2、css代码部分
.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;}
3、js代码部分
需要引入外部Jquery文件，本例中为jquery-1.8.2.min.js。
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();
}) by http://www.
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。