Star Rating - javascript

Question

I’m creating a star rating system for an application of mine. After a little work I managed to get a code on the net and modified it for my purposes. In it, there is a 'full' class that fills the stars according to the user hovers over them, and when he removes the mouse the stars are empty again. Each star has a score.

The problem is that in the code I arranged it makes the entry in the database when the user clicks on the star, and in my case I have a button to send the data. That is, I need that when the user clicks on the star, save her score to use later when the user presses the button, show the full stars up to where he clicked and when he takes the mouse from the div does not get all empty again. And as I mentioned before, I’m very bad at javascript. If any of you can give a little help or some tips I’m very grateful. Follow the code I’ve used so far below:

$(function () {
    $('.star').on('mouseover', function () {
        var indice = $('.star').index(this);
        $('.star').removeClass('full');
        for (var i = 0; i <= indice; i++) {
            $('.star:eq(' + i + ')').addClass('full');
        }
    });

    $('.star').on('mouseout', function () {
        $('.star').removeClass('full');
    });

    $('.star').on('click', function () {
        var ponto = $(this).attr('id');
        alert(ponto); // Esta parte é só uma forma para eu manter o controle, para saber se o ponto corresponde a estrela clicada  
    });
});

OBS:

star is the name of the div where the stars are; full is the class that fills the stars; each star image has an id, with a different score;

Answer 1

Here is a suggestion:

$(function(){
    var estrelas = $('.star');
    var escolhida = 0;

    function repaint(e){
        var indice = $(this).index() + 1;
        if (e.type == 'click') escolhida = indice;
        estrelas.removeClass('full');
        var upTo = $(this).hasClass('star-wrapper') ? escolhida : indice;
        estrelas.slice(0, upTo).addClass('full');
    }

    $('.star-wrapper').on('mouseleave', repaint);
    estrelas.on('mouseenter mouseleave click', repaint);
});

jsFiddle: http://jsfiddle.net/k5onfzwr/

This example uses sprites, ie images .png which changes position to show full star.

I made a version that uses the same function repaint for all events, and so the code gets smaller. I think the code explains itself. Eventually you may have doubt here:

var upTo = $(this).hasClass('star-wrapper') ? escolhida : indice;
estrelas.slice(0, upTo).addClass('full');

the idea here is to use the .slice() only to add the class to the chosen element. And if it is a mouseleave in the .star-wrapper then it must be the chosen star and not the last who had the mouse over.

And how to use it later, in another function?

As the variable escolhida is available in the scope of this $(function(){ you only need to place the new code in the following and use the value of escolhida.