jquery星级插件、支持页面中多次使用

我从网上收集一个jquery星级插件的，它只支持一个页面中使用一次，多次使用的话会发生冲突，达不到我项目的需求，没办法，只能修改它，

效果图如下：

css所需背景图片：

二话不说，帖代码：

html代码

 <  div   class  ="xing"  > 

     <  span   style  ="float: left"  > 总体评价: <  font   color  ="#CC3300"   size  ="-1"  > * </  font  ></  span  ><  div

          class  ="rating-wrap"  > 

         <  ul   id  ="xing1"  > 

             <  li  ><  a   href  ="javascript:;"   data-rate-value  ="10"   data-hint  ="很差"   title  ="很差"   class  ="one-star"  > 

             </  a  ></  li  > 

             <  li  ><  a   href  ="javascript:;"   data-rate-value  ="20"   data-hint  ="差"   title  ="差"   class  ="two-stars "  > 

             </  a  ></  li  > 

             <  li  ><  a   href  ="javascript:;"   data-rate-value  ="30"   data-hint  ="还行"   title  ="还行"   class  ="three-stars "  > 

             </  a  ></  li  > 

             <  li  ><  a   href  ="javascript:;"   data-rate-value  ="40"   data-hint  ="好"   title  ="好"   class  ="four-stars"  > 

             </  a  ></  li  > 

             <  li  ><  a   href  ="javascript:;"   data-rate-value  ="50"   data-hint  ="很好"   title  ="很好"   class  ="five-stars"  > 

             </  a  ></  li  > 

         </  ul  > 

     </  div  > 

     <  span   class  ="xing1"  > 点击星星开始打分 </  span  > 

 </  div  > 

 <  divclass  ="xing"  > 

     <  span   style  ="float: left"  > 广告效果: <  font   color  ="#CC3300"  size  ="-1"  > * </  font  ></  span  ><  div

          class  ="rating-wrap"  > 

         <  ulid  ="xing2"  > 

             <  li  ><  a   href  ="javascript:;"   data-rate-value  ="10"   data-hint  ="很差"   title  ="很差"   class  ="one-star"  > 

             </  a  ></  li  > 

             <  li  ><  a   href  ="javascript:;"   data-rate-value  ="20"   data-hint  ="差"   title  ="差"   class  ="two-stars "  > 

             </  a  ></  li  > 

             <  li  ><  a   href  ="javascript:;"   data-rate-value  ="30"   data-hint  ="还行"   title  ="还行"   class  ="three-stars "  > 

             </  a  ></  li  > 

             <  li  ><  a   href  ="javascript:;"   data-rate-value  ="40"   data-hint  ="好"   title  ="好"   class  ="four-stars"  > 

             </  a  ></  li  > 

             <  li  ><  a   href  ="javascript:;"   data-rate-value  ="50"   data-hint  ="很好"    title  ="很好"   class  ="five-stars"  > 

             </  a  ></  li  > 

         </  ul  > 

     </  div  > 

     <  span   class  ="xing2"  > 点击星星开始打分 </  span  > 

 </  div  >

复制代码

JS代码

<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>

复制代码

注：css代码从项目中分解出，有一小部分没贴完，大家可以根据自己的需求修改css style

本人刚从百度搬家到园子，

本人原文： http://hi.baidu测试数据/pan524365501/blog/item/27551603bad096174afb515a.html

作者： Leo_wl

出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于jquery星级插件、支持页面中多次使用的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did49632

更新时间：2022-09-24 阅读：35次