jQuery星星评分代码_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

jQuery星星评分代码

来源：未知作者：类型：图文教程点击次数：发布时间：2016-01-16 17:07:21

jQuery星星评分代码

jQuery星星评分，最少一分，最多5分，这是我爱模板网最近给一个客户做网站时，写的，客户那边没有要求有半分的情况，都是整数，半分其实原理一样，下面贴出代码：

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>jQuery星星评价代码 - 我爱模板网 www.5imoban.net</title> <style> html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{ margin:0; padding:0 } ul,ol,dl{list-style-type:none} img{border:none;} .clearfix{*zoom:1;} .clearfix:before,.clearfix:after{display:table; line-height:0; content:"";} .clearfix:after{clear:both;} .p20{padding:20px;} .mb20{margin-bottom:20px;} .mr20{margin-right:20px;} .fl{float:left; display:block;} .fr{float:right; display:block;} #score{font-size:30px;} #score .tit img{height:30px; width:30px; margin-top:6px;} #score dd{width:40px; height:40px; background:url(http://www.5imoban.net/view/demoimg/star2.png) no-repeat center; margin-left:15px;} #score dd.on{background-image:url(http://www.5imoban.net/view/demoimg/star2_checked.png);} </style> </head> <body>  <div id="score" class="p20"> <div class="tit clearfix"> <img src="http://www.5imoban.net/view/demoimg/edit_ico.png" class="fl mr20"> <span class="fl">评分</span> </div> <ul class="p20"> <li class="clearfix mb20"> <div class="fl">描述相符：</div> <dl class="fl clearfix"> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> </dl> </li> <li class="clearfix mb20"> <div class="fl">服务态度：</div> <dl class="fl clearfix"> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> </dl> </li> <li class="clearfix mb20"> <div class="fl">发货速度：</div> <dl class="fl clearfix"> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> </dl> </li> <li class="clearfix mb20"> <div class="fl">物流速度：</div> <dl class="fl clearfix"> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> <dd class="on fl"></dd> </dl> </li> </ul> </div> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script> $(function(){ //评分 $("#score li dd").click(function(){ var index = $(this).index(); $(this).parent("dl").children("dd").removeClass("on"); var i = index+1; $(this).parent("dl").children("dd:lt("+i+")").addClass("on"); }) }) </script> </body> </html>
提示：您可以先修改部分代码再运行

您可以运行上面的代码，查看效果。原理很简单，就是点击哪个星星，获取这个星星所在行的索引值，让比这个索引值小的星星，都加上“on”样式，也就是选中的样式，比这个大的，就去除“on”样式。