4

Estou criando um sistema de avaliação por estrelas para uma aplicação minha. Depois de um pouco de trabalho consegui arranjar um código na net e modifiquei para meus propósitos. Nele, existe uma class 'full' que vai enchendo as estrelinhas de acordo com o usuário passa o mouse sobre elas, e quando ele retira o mouse as estrelas voltam a ficar vazias. Cada estrela tem uma pontuação.

O problema é que no código que eu arranjei ele faz a inserção no banco de dados quando o usuário clica na estrela, e no meu caso eu tenho um botão para enviar os dados. Ou seja, eu preciso que quando o usuário clique na estrela, guardar a pontuação dela para usar mais tarde quando o usuário apertar no botão, mostrar as estrelas cheias até onde ele clicou e quando ele tirar o mouse da div não voltar a ficar tudo vazio. E como eu já mencionei antes, sou muito ruim em javascript. Se alguém de vocês puder dar uma ajudinha ou algumas dicas fico muito agradecido. Segue o código que utilizei até agora abaixo:

$(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 é o nome da div onde ficam as estrelas; full é a class que enche as estrelas; cada imagem de estrela possui um id, com uma pontuação diferente;

1
  • Olá Rafael. A minha resposta ajudou a resolver o teu problema?
    – Sergio
    Commented 3/07/2016 às 19:47

1 Resposta 1

3

Aqui fica uma sugestão:

$(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/

Este exemplo usa sprites, ie imagens .png que muda de posição para mostrar a estrela cheia.

Fiz uma versão que usa a mesma função repaint para todos os eventos, e assim o código fica mais pequeno. Acho que o código se explica a sí próprio. Eventualmente podes ter dúvida aqui:

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

a ideia aqui é usar o .slice() para só adicionar a classe até ao elemento escolhido. E caso seja um mouseleave no .star-wrapper então deve ser a estrela escolhida e não a ultima que teve o mouse por cima.

E como usar isso depois, noutra função?

Como a variável escolhida está disponivel no escopo dessa $(function(){ só precisas de colocar o novo código no seguimento deste e usar o valor de escolhida.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .