javascript星级评分（多个）
JS打多个类型星级评分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta charset="UTF-8"> <title>javascript星级评分</title> <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <style type="text/css"> * { margin: 0; padding: 0; } .wrapper { height: 20px; padding: 5px; width: 130px; margin: 100px auto 10px; } .wra { height: 20px; padding: 5px; width: 130px; margin: 100px auto 10px; } a { float: left; width: 26px; height: 20px; background: url(img/star.png) 0 -20px no-repeat; } p { font: 24px SimSun; width: 130px; margin-left: auto; margin-right: auto; } </style> </head> <body> <div id="a1" class="wrapper"> <a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a> <a href="javascript:;"></a><a href="javascript:;"></a> </div> <p id="p1"> </p> <div id="a2" class="wrapper"> <a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a> <a href="javascript:;"></a><a href="javascript:;"></a> </div> <p id="p2"> </p> <div id="a3" class="wrapper"> <a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a> <a href="javascript:;"></a><a href="javascript:;"></a> </div> <p id="p3"> </p> <div id="a4" class="wrapper"> <a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a> <a href="javascript:;"></a><a href="javascript:;"></a> </div> <p id="p4"> </p> </body> </html> <script type="text/javascript"> $(function () { var objs = $(".wrapper a"); $(objs).mouseover(function () { var ix = $(this).index(); sets(ix, this); }); $(objs).mouseout(function () { var ix = $(this).parent().attr("rel"); if (ix == undefined) ix = -1; sets(ix, this); }); $(objs).click(function () { var ix = $(this).index(); $(this).parent().next("p").html((ix + 1) + ' 颗星'); $(this).parent().attr("rel", ix); sets(ix, this); }); }); function sets(ix, obj) { $(obj).parent().children().each(function (ik) { if (ik <= ix) { $(this).css("backgroundPosition", '0 0'); } else { $(this).css("backgroundPosition", '0 -20px'); } }); } </script>
单个星级评分（纯JS)：
<script type="text/javascript"> window.onload = function () { var star = document.getElementById('a1').getElementsByTagName('a'); var temp = 0; for (var i = 0, len = star.length; i < len; i++) { star[i].index = i; star[i].onmouseover = function () { clear(); for (var j = 0; j < this.index + 1; j++) { star[j].style.backgroundPosition = '0 0'; } } star[i].onmouseout = function () { for (var j = 0; j < this.index + 1; j++) { star[j].style.backgroundPosition = '0 -20px'; } current(temp); } star[i].onclick = function () { temp = this.index + 1; document.getElementById('p1').innerHTML = temp + ' 颗星'; current(temp); } } //清除所有 function clear() { for (var i = 0, len = star.length; i < len; i++) { star[i].style.backgroundPosition = '0 -20px'; } } //显示当前第几颗星 function current(temp) { for (var i = 0; i < temp; i++) { star[i].style.backgroundPosition = '0 0'; } } }; </script>
图片
