开发者

jquery stars rating control

开发者 https://www.devze.com 2023-03-20 16:20 出处:网络
Im trying to create functionality described below: Ive got 5 images of stars. On server I decide which image color should be displayed in each image. If the rating computed on the server is 3 then fi

Im trying to create functionality described below:

Ive got 5 images of stars. On server I decide which image color should be displayed in each image. If the rating computed on the server is 3 then first three stars are yello and last 2 are grey.

I would like to achieve functionality (using jquery). that when user hovers any star this one and previous colors are changed to red (image url is changed) and all next stars have grey color but when cursor leaves stars then the state of those 5 stars should be like before entering.

I wrote something like this but its not good and not really working as i would like it to:

    var stars = {
    initStars: function initStars() {

      $('.starsHolder').hover(function() {
         this.star1ImageUrl = $(this).children('.star').eq(0).attr('src');
         this.star2ImageUrl = $(this).children('.star').eq(1).attr('src');
         this.star3ImageUrl = $(this).children('.star').eq(2).attr('src');
         this.star4ImageUrl = $(this).children('.star').eq(3).attr('src');
         this.star5ImageUrl = $(this).children('.star').eq(4).attr('src');
         $(this).children('.star').hover(function() { $(this).attr('src', '/star_red.png'); $(this).prevAll('.star').attr('src', '/st开发者_JS百科ar_red.png');}, function() { });
      }, function(){
         $(this).children('.star').eq(0).attr('src', this.star1ImageUrl);
         $(this).children('.star').eq(1).attr('src', this.star2ImageUrl);
         $(this).children('.star').eq(2).attr('src', this.star3ImageUrl);
         $(this).children('.star').eq(3).attr('src', this.star4ImageUrl);
         $(this).children('.star').eq(4).attr('src', this.star5ImageUrl);
         $(this).children('.star').unbind();
      })
    }
};

stars are asp:ImageButton thats why I change src attribute but it doesnt matter. Stars are in span with class starsHolder

Thanks for any help with that


There are many jQuery plugins which do this already. Here are a few. Take you pick.

http://www.fyneworks.com/jquery/star-rating/

http://www.wbotelhos.com/raty/

http://orkans-tmp.22web.net/star_rating/

0

精彩评论

暂无评论...
验证码 换一张
取 消