[转载]jquery星级插件、支持页面中多次使用 – 钊子 – 博客园.
我从网上收集一个JQuery星级插件的,它只支持一个页面中使用一次,多次使用的话会发生冲突,达不到我项目的需求,没办法,只能修改它,
效果图如下:
css所需背景图片:
二话不说,帖代码:
html代码
<script type="text/javascript" src="js/jQuery_1.42.js"></script> <script type="text/javascript"> $(function(){ $(".rating-wrap a").mouseover(function(){ $(this).parent().siblings().find("a").removeClass("active-star"); $(this).addClass("active-star"); $("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")) }).mouseleave(function(){ var selectID=$(this).parent().parent().attr("id")+"select"; $(this).removeClass("active-star"); if($("#"+selectID).length==0) { $("."+$(this).parent().parent().attr("id")).removeClass("active-hint").html("点击星星开始打分"); } else { $("."+$(this).parent().parent().attr("id")).html($("#"+selectID).attr("data-hint")); $("#"+selectID).addClass("active-star"); } }).click(function(){ $(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id")+"select"); $(this).parent().siblings().find("a").attr("id",""); $("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint"); }) }) </script>
css代码
<style> .item-rank-rst, .user-rank-rst, .rating-wrap ul, .rating-wrap a:hover, .rating-wrap .active-star, .user-m-star, .urr-rank60, .breadcrumb .note { background-image: url(xing_bg.png);/**-----星级插件背景图片----**/ background-repeat: no-repeat; } .rating-wrap { background: none repeat scroll 0 0 #FFF9F1; border: 1px solid #EFE0D7; display: inline-block; float: left; height: 20px; margin-right: 5px; padding: 4px 0 0 5px; position: relative; top: -2px; width: 89px; z-index: 0; } .rating-wrap ul { background-position: 0 -250px; height: 16px; position: relative; width: 85px; z-index: 10; } .rating-wrap li { display: inline; } .rating-wrap a { display: block; height: 16px; left: 0; position: absolute; top: 0; } .rating-wrap .five-stars { background-position: 0 -160px; width: 84px; z-index: 10; } .rating-wrap .four-stars { background-position: 0 -178px; width: 68px; z-index: 20; } .rating-wrap .three-stars { background-position: 0 -196px; width: 51px; z-index: 30; } .rating-wrap .two-stars { background-position: 0 -214px; width: 34px; z-index: 40; } .rating-wrap .one-star { background-position: 0 -232px; width: 17px; z-index: 50; } .rating-block .hint { color: #999999; float: left; } .active-hint { color: #CC0000; } .rating-block .err-hint { color: #EE0000; font-weight: bold; } </style>