本文实例讲述了基于jQuery实现的美观星级评论打分组件代码。分享给大家供大家参考，具体如下：

这款jquery星级评论打分组件，是通用打分组件，回调打分后执行的回调，这个。索引：获取当前选中值。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-rate-dfzj-codes/

具体代码如下：

！DOCTYPE HTMl HTMl head meta charset=' utf-8 ' title jquery星级评论打分组件/title脚本src=' http : jquery-1。6 .2 .量滴js '/script脚本var PrTe=function(框，回调){这个.索引=nullvar B=$('# '框)，rate=B.children('i ')，w=rate.width()，n=rate.length，me=this for(var I=0；在；i ){ rate.eq(i).CSS({ ' width ' : w *(I ^ 1)，' z-index ' :n-I })；}费率。悬停(函数(){ var S=b . children(' I . select ')；$(这个)。addClass(')悬停')。兄弟姐妹()。removeClass(“”悬停');if($(this).index(). index()){ s . add class(' hover ')；} }，function(){ rate。移除类(“悬停”)；})速率。点击(函数(){ rate。移除类(“”选择悬停');$(这个)。添加CLaSS(' select ')；我索引=$(这个).索引()1;如果(回调){回调();} })}/脚本样式类型=' text/CSS ' h1 { font :26 px/3 ' Microsoft yahei '，' sim hei '；color : # 000 text-缩进：2 emtext-shadow:1px 1px 2px #ccc} .p _ rate { height:14px位置：相对；宽度：80 px飞越：隐藏；显示：内嵌块；背景： URL(图像/速率。png)重复-x；margin:40px 100px} .p _ rate I { position : absolutetop :0 left :0 cursor : pointer指针；高度：14px宽度：16 px背景： URL(图片/速率。png)repeat-x 0-500 px } .利率选择{背景-位置：0 -32px} .利率悬停{背景-位置：0-16px }/样式/头体h1j查询星级评论打分组件/h1 span class=' p _ rate ' id=' p _ rate ' I title=' 1分/i i title='2分/i i title='3分/i i title='4分/i i title='5分/I/span脚本var Rate=新PrTe(' p _ Rate '，函数(){alert(Rate ."索引"分')});/脚本/正文/html希望本文所述对大家jQuery程序设计有所帮助。