CODEWITHSUNDEEP
jquery
gruber
gruber

Reputation: 29737

jquery stars rating control

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', '/star_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

Upvotes: 0

Views: 3523

Answers (1)

Craig M
Craig M

Reputation: 5628

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/

Upvotes: 1

Related Questions