文章目录
实现功能:
- 同一页面可以使用多个评星,相互不干扰
- 星星数量可自定义
- 可设置默认的星级
- 在选择星级之后,仍有悬停效果
- 可自定义评星描述
rating.js代码:
function InitStar(count,cur,s0,s1,ctn,txt){ for(var i=1;i<=count;i++){ var p=(i<=cur)?s1:s0; $("<img/>").attr({"src":p,"flag":i}).css("cursor","pointer") .mouseover(function(){ var cur=parseInt($(this).attr("flag")); $("#"+ctn).children().each(function(){ var i=parseInt($(this).attr("flag")); var p=(i<=cur)?s1:s0; $(this).attr("src",p); }); showStar(txt,cur); }).click(function(){ //原文博客:blog.csdn.net/bluceyoung $("#"+ctn).attr("star",$(this).attr("flag")); }).appendTo($("#"+ctn)); } $("#"+ctn).attr("star",cur).mouseout(function(){ var cur=parseInt($(this).attr("star")); $(this).children().each(function(){ var p=($(this).attr("flag")<=cur)?s1:s0; $(this).attr("src",p); }); showStar(txt,cur); }); } function showStar(txt,cur){ $("#"+txt).val(cur); $("#"+txt).change(); }
参数说明:
count:星星总数
cur:默认选中第几颗
s0:空星星的图片路径
s1:实星星的图片路径
ctn:创建星星的容器
txt:显示评星描述的textbox
页面代码:
<html> <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"> </script> <script src="rating.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ //创建星星 InitStar(5,3,'k.gif','s.gif','lblStar1','txt') //重写评星描述 $("#txt").change(function(){ var v=$(this).val(); switch(v){ case "1":v="太差了";break; case "2":v="有待提高";break; case "3":v="一般";break; case "4":v="不错";break; case "5":v="太棒了";break; default:v=""; } $(this).val(v); }); }); </script> <body> <label id="lblStar1"></label><input type="text" id="txt"> <br> </body> </html>
默认在评星描述的textbox里显示的只是评星的等级数,若想自定义评级描述,则加一个change事件,在里面替换值即可
效果图: