jquery - PHP five star rating - stars don't remain clicked -

i have used 5 star rating system(based on jquery , php) provided in link 1 of clients. now, want if user rates product many number of stars should remain highlighted in current scenario, once user moves out mouse stars no longer remain highlighted.

i have tried lot mouseout functions conflicts click function. far, i'm using :

html

 <div id="r1" class="rate_widget">     <div class="star_1 ratings_stars" id="1"></div>     <div class="star_2 ratings_stars" id="2"></div>     <div class="star_3 ratings_stars" id="3"></div>     <div class="star_4 ratings_stars" id="4"></div>     <div class="star_5 ratings_stars" id="5"></div>     <div class="total_votes">vote data</div> </div> 

js - have tweaked bit on own no success.

 $(document).ready(function() {      $('.ratings_stars').hover(         // handles mouseover         function() {             $(this).prevall().andself().addclass('ratings_over');             $(this).nextall().removeclass('ratings_vote');          },         // handles mouseout         function() {             $(this).prevall().andself().removeclass('ratings_over');             // can't use 'this' because wont contain updated data             set_votes($(this).parent());         }     );       // records vote     $('.ratings_stars').bind('click', function() {         var star = this;         var widget = $(this).parent();         count = $(star).attr('id');         var clicked_data = {             clicked_on : $(star).attr('class'),             widget_id : $(star).parent().attr('id')         };         $.post(             'ratings.php',             clicked_data,             function(info) {                 widget.data( 'fsr', info );                 set_votes(widget); //$(this).prevall().andself().addclass('ratings_over');     //        $(this).nextall().removeclass('ratings_vote');          $('#msg').hide().html("you have rated product "+count+" stars.").fadein(1500);         //alert("you have rated product with"+count);             },             'json'         );      });    });  function set_votes(widget) {      var avg = $(widget).data('fsr').whole_avg;     var votes = $(widget).data('fsr').number_votes;     var exact = $(widget).data('fsr').dec_avg;      window.console && console.log('and in set_votes, thinks fsr ' + $(widget).data('fsr').number_votes);      $(widget).find('.star_' + avg).prevall().andself().addclass('ratings_vote');    // $(widget).find('.star_' + avg).nextall().removeclass('ratings_vote');      $(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' ); } 

in current situation, once stars clicked shows updated average rating returned php calculation script.

i want stars remain highlighted after clicked upon , after mouseout , if not clicked mouseout should function i.e. unhighlight stars.

please help, desperate.

in current setup, set_votes(widget) method not know, whether user voted.
can add quite modifying 'click' event handler , adding piece of data in ajax success callback:

... function(info) {     widget.data( 'fsr', info );     // add user's voting data:     widget.data('fsr').own_voting = count;      set_votes(widget);      $('#msg').hide().html("you have rated product "+count+" stars.").fadein(1500);     //alert("you have rated product with"+count); } ... 

then, have modify set_votes(widget) method use information:

function set_votes(widget) {      var avg = $(widget).data('fsr').whole_avg;     var votes = $(widget).data('fsr').number_votes;     var exact = $(widget).data('fsr').dec_avg;      var own = $(widget).data('fsr').own_voting;      // set voting own if defined, else avg     // set class distinguish avg own     if(typeof own != 'undefined') {         voting = own;             class = 'ratings_over';     } else {         voting = avg;             class = 'ratings_vote';     }      window.console && console.log('and in set_votes, thinks fsr ' + $(widget).data('fsr').number_votes);      // replaced avg voting     // remove classes make sure nothing bugs     $(widget).find('.star_' + voting).nextall()              .removeclass('ratings_vote').removeclass('ratings_over');     $(widget).find('.star_' + voting).prevall().andself()              .removeclass('ratings_vote').removeclass('ratings_over').addclass(class);      $(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' ); } 

i'm not familiar js, undefined part might wrong - afaik should work this.

---

if want widget display user's voting after page has been reloaded, have add own_voting field server's response fetching ajax call.