一个星级评价代码 可任意位置放置

css

#firstComment img {
 padding: 0px 5px 0 0;
}

jsp
<span class="goodComment" style=" width:300px; display:inline-block;">
<label ><em style='color:red;'>*</em>描述相符</label>
<span  class="ks-simplestar"><img src="./images/T1j_SkXl0fXXXXXXXX-19-19.png"><img src="./images/T1j_SkXl0fXXXXXXXX-19-19.png"><img src="./images/T1j_SkXl0fXXXXXXXX-19-19.png"><img src="./images/T1j_SkXl0fXXXXXXXX-19-19.png"><img src="./images/T1j_SkXl0fXXXXXXXX-19-19.png"></span>
<a class="zhushi"></a>
<span  style="display:none;"><a id="zhushi0">一星,很不满意</a><a id="zhushi1">二星,不满意</a><a id="zhushi2">三星,一般</a><a id="zhushi3">四星,满意</a><a id="zhushi4">五星,非常满意</a></span>
<input type="hidden"  class="goodsCommentId" name="pj.goodsCommentGrade" value="" />
</span>




js代码
$(function(){

satrtComments($(".goodComment"));
satrtComments($("#goodComment"));//都行

})




//星级评价效果动态
var ystar="/ZhiYuanNongShang/images/T1eMt9XclyXXXXXXXX-19-19.png";
var nstar="/ZhiYuanNongShang/images/T1j_SkXl0fXXXXXXXX-19-19.png";
var ystar="/TNA_home/images/T1eMt9XclyXXXXXXXX-19-19.png";
var nstar="/TNA_home/images/T1j_SkXl0fXXXXXXXX-19-19.png";

function satrtComments(objs) {

     $(objs).each( function () {

         var mystars = this ;

         var number = 9;

         var flag = true ;

         $(mystars).find( "img" ).each( function (i) {

             $( this ).click( function () {

                 number = i;

                 flag = false ;

                 $(mystars).find( "img" ).each( function (j) {

                     $( this ).attr( "src" , ystar);

                     if (i == j) {

                         return false ;

                     }

                 });

                 //alert($(mystars).find("goodsCommentId").val());

                 // $(mystars).find("goodsCommentId").val("1");

                 $(mystars).find( ".goodsCommentId" ).val(i + 1);

                 // $(".goodsCommentId").val(i+1);

             });

 

             $( this ).mouseenter( function () {

                 if (i != number) {

                     var lazy = $(mystars).find( ".zhushi" + i).clone();

                     //$(".zhushi"+i).append(lazy);

                     $(mystars).find( ".zhushi" ).html(lazy);

                 }

                 $(mystars).find( "img" ).each( function (j) {

                     $( this ).attr( "src" , ystar);

                     if (i == j) {

                         return false ;

                     }

                 });

             });

 

             $( this ).mouseleave( function () {

                 $(mystars).find( ".zhushi" ).empty();

                 //var lazy=$(mystars).find(".zhushi"+i).clone();

                 //if(i != number){$(mystars).find(".zhushi").empty();}

                 if (flag || 1 == 1) {

                     $(mystars).find( "img" ).each( function (j) {

                         if (flag) {

                             $( this ).attr( "src" , nstar);

                         }

                         if (!flag && j > number) {

                             $( this ).attr( "src" , nstar);

                         }

 

                     });

                 }

                 var re = $(mystars).find( "input" ).val();

                 var lazy = $(mystars).find( ".zhushi" + (re - 1)).clone();

                 //alert(lazy.html());

                 $(mystars).find( ".zhushi" ).html(lazy);

             });

         });

 

 

     })

}