Jquery 评星效果Rating精华版

最新推荐文章于 2024-12-12 16:26:04 发布

江溪浣君

最新推荐文章于 2024-12-12 16:26:04 发布

阅读量4.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： jquery jQuery JQUERY Jquery JQuery rating 等级评星

本文链接：https://blog.youkuaiyun.com/bluceyoung/article/details/8573629

JS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Jquery实现一个功能完善的评星系统，包括支持页面上多个独立的评星组件，可自定义星星数量、默认星级、悬停效果以及评星描述。示例中详细给出了rating.js的代码实现以及配套的页面HTML结构，帮助读者快速理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能：

同一页面可以使用多个评星，相互不干扰
星星数量可自定义
可设置默认的星级
在选择星级之后，仍有悬停效果
可自定义评星描述

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.youkuaiyun.com/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事件，在里面替换值即可

效果图：