实现功能：
- 同一页面可以使用多个评星，相互不干扰
- 星星数量可自定义
- 可设置默认的星级
- 在选择星级之后，仍有悬停效果
- 可自定义评星描述
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>