PHP five star rating - stars don't remain clicked
<p>I have used the five star rating system(Based on jquery and PHP) provided <a href="http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/" rel="nofollow">in this link</a> for one of my clients. Now, they want that if the user rates a product those many number of stars should remain highlighted but in the current scenario, once the user moves out his mouse the stars no longer remain highlighted. </p>

<p>I have tried a lot but the <code>mouseout</code> functions conflicts with the <code>click</code> function. So far, i'm using this :</p>

<p><strong>HTML</strong></p>

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

<p><strong>JS</strong> - I have tweaked this a bit on my own but to no success.</p>

<pre><code> $(document).ready(function() {

    $('.ratings_stars').hover(
        // Handles the mouseover
        function() {
            $(this).prevAll().andSelf().addClass('ratings_over');
            $(this).nextAll().removeClass('ratings_vote'); 
        },
        // Handles the mouseout
        function() {
            $(this).prevAll().andSelf().removeClass('ratings_over');
            // can't use 'this' because it wont contain the updated data
            set_votes($(this).parent());
        }
    );


    // This actually records the 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 this product with "+count+" stars.").fadeIn(1500);
        //alert("you have rated this 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 &amp;&amp; console.log('and now in set_votes, it thinks the fsr is ' + $(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)' );
}
</code></pre>

<p>In the current situation, once the stars are clicked it shows the updated average rating returned from the PHP calculation script.</p>

<p>I want the stars to remain highlighted after clicked upon and even after <code>mouseout</code> and if they are not clicked the <code>mouseout</code> should function as it is i.e. unhighlight the stars. </p>

<p>Please help, i am desperate.</p>
