本文实例讲述了jQuery基于ajax实现星星评论代码。分享给大家供大家参考。具体如下：
这里使用jquery模仿点评网的星星评论功能，Ajax评论模块，鼠标点击星星即可评价，下边是分数，可以点击后给分，网上很流行的效果，本代码相对完整，相信很多朋友会喜欢的。
先来看看运行效果截图：
<li><a href="http://www.100sucai.com/web/wangyezhizuo/fanhuidingbu" title="返回顶部">返回顶部</a></li> <li><a href="http://www.100sucai.com/web/wangyezhizuo/tucengdaima" title="图层代码">图层代码</a></li> <li><a href="http://www.100sucai.com/web/wangyezhizuo/gundongdaima" title="滚动代码">滚动代码</a></li> <li><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" title="幻灯片">幻灯片</a></li> <li><a href="http://www.100sucai.com/web/wangyezhizuo/wenzitexiao" title="文字特效">文字特效</a></li>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>jquery点评网星星评论</TITLE><style>body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}ul,ol,li{list-style:none;}input,button{margin:0;font-size:12px;vertical-align:middle;}body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:left; margin:0 auto;}table{border-collapse:collapse;border-spacing:0;}b,em,i{ font-style:normal; font-weight:normal;}h1,h2,h3,h4{ font-size:14px;}h5{ font-size:12px;}h6{ font-size:12px;font-style:normal;}.fl{ float: left; display: inline;}.box_163css{ width: 480px;margin:20px auto; height: 30px;}.s_name{ float:left; display: block; width: 60px; padding-top: 4px; text-align: right;}.star_ul{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat 0 -150px; width: 132px; z-index: 10; position: relative; height: 25px;}.star_ul li{ float: left; margin-right:1px;width: 25px; height: 25px; }.star_ul li a{ display: block; height: 25px; position: absolute; left: 0; top: 0; text-indent: -999em;}.star_ul li .active-star{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat;}.star_ul li .one-star{width: 25px;background-position:0 -120px; z-index: 50;}.star_ul li .two-star{width: 51px;background-position:0 -90px;z-index: 40;}.star_ul li .three-star{width:79px; background-position:0 -60px;z-index: 30;}.star_ul li .four-star{width:105px; background-position:0 -30px;z-index: 20;}.star_ul li .five-star{width:129px; margin-right: 0; background-position:0 0;z-index: 10;}.s_result{ padding: 6px 0 0 5px; }.square_ul{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat 0 -222px; width: 146px; z-index: 10; position: relative; height: 20px;}.square_ul li{ float: left; margin-right:1px;width: 29px; height: 20px; }.square_ul li a{ display: block; height: 20px; position: absolute; left: 0; top: 0; text-indent: -999em;}.square_ul li .active-square{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat;}.square_ul li .square-1{width: 29px;background-position:0 -243px; z-index: 50;}.square_ul li .square-2{width: 58px;background-position:0 -264px;z-index: 40;}.square_ul li .square-3{width:87px; background-position:0 -285px;z-index: 30;}.square_ul li .square-4{width:116px; background-position:0 -306px;z-index: 20;}.square_ul li .square-5{width:145px; margin-right: 0; background-position:0 -327px;z-index: 10;}.s_result_square{padding: 4px 0 0 9px; }</style><SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT></HEAD><script type="text/javascript">$(function(){ $('.star_ul a').hover(function(){$(this).addClass('active-star');$('.s_result').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-star');$('.s_result').css('color','#333').html('请打分')}); $('.star_ul a').click(function(){ alert($('.s_result').html());})$('.square_ul a').hover(function(){$(this).addClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#333').html('请打分')}); $('.square_ul a').click(function(){ alert($(this).parents('.box_163css').find('.s_result_square').html()); })})</script><BODY><div class="box_163css"> <span class="s_name">总体评价：</span> <ul class="star_ul fl"> <li><a class="one-star" title="很差" href="#"></a></li> <li><a class="two-star" title="差" href="#"></a></li> <li><a class="three-star" title="还行" href="#"></a></li> <li><a class="four-star" title="好" href="#"></a></li> <li><a class="five-star" title="很好" href="#"></a></li> </ul> <span class="s_result fl">请打分</span></div><div class="box_163css"> <span class="s_name">口味：</span> <ul class="square_ul fl"> <li><a class="square-1" title="差" href="#"></a></li> <li><a class="square-2" title="一般" href="#"></a></li> <li><a class="square-3" title="好" href="#"></a></li> <li><a class="square-4" title="很好" href="#"></a></li> <li><a class="square-5" title="非常好" href="#"></a></li> </ul> <span class="s_result_square fl">请打分</span></div><div class="box_163css"> <span class="s_name">环境：</span> <ul class="square_ul fl"> <li><a class="square-1" title="差" href="#"></a></li> <li><a class="square-2" title="一般" href="#"></a></li> <li><a class="square-3" title="好" href="#"></a></li> <li><a class="square-4" title="很好" href="#"></a></li> <li><a class="square-5" title="非常好" href="#"></a></li> </ul> <span class="s_result_square fl">请打分</span></div><div style="text-align:center;clear:both"></div></BODY></HTML>
Comment vérifier les liens morts d'un site Web
Méthode de cryptage des données
Modifier le nom du fichier sous Linux
Solution http500
méthode de sauvegarde des données MySQL
Vérifier l'occupation du port sous Linux
À quel point le Dimensity 6020 est-il équivalent à Snapdragon ?
Comment supprimer des éléments de tableau en JavaScript
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
