扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
来源：中国IT实验室 2013年3月5日
关键字： Jquery
实现功能：
同一页面可以使用多个评星，相互不干扰
星星数量可自定义
可设置默认的星级
在选择星级之后，仍有悬停效果
可自定义评星描述
rating.js代码：
[javascript]
function InitStar（count,cur,s0,s1,ctn,txt）{
$（"#"+ctn）。attr（"star",cur）；
for（var i=1;i<=count;i++）{
var p=（i<=cur）？s1:s0;
$（"<img/>"）。addClass（"star"）。css（"cursor","pointer"）。attr（{"src":p,"flag":i}）。appendTo（$（"#"+ctn））；
}
$（"img.star"）。mouseover（function（）{
var cur=parseInt（$（this）。attr（"flag"））；
$（"img.star"）。each（function（）{
var i=parseInt（$（this）。attr（"flag"））；
var p=（i<=cur）？s1:s0;
$（this）。attr（"src",p）；
}）；
showStar（txt,cur）；
}）；
$（"img.star"）。click（function（）{
$（"#"+ctn）。attr（"star",$（this）。attr（"flag"））；
}）；
$（"#"+ctn）。mouseout（function（）{
var cur=parseInt（$（this）。attr（"star"））；
$（"img.star"）。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]
<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事件，在里面替换值即可
如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。
京公网安备 11010802021500号