1

Boa noite,

E o seguite fiz um sistema de rating para o meu site ele esta a funcionar bem só falta uma coisa que não estou a conseguir fazer. Eu tenho o rating de 1 a 10 em que fica assim 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5 e 5 esta a funcionar só queria ao passar o rato por cima ele faz hover para outra cor e queria que consoante fosse passando o rato as outras opcões do rating fica-se activadas com a cor neste momento só activa um que e o que escolhi.

HTML

<div class="rate-ex1-cnt">
    <div id="0.5" class="rate-btn-0.5 rate-btn"></div>
    <div id="1" class="rate-btn-1 rate-btn"></div>
    <div id="1.5" class="rate-btn-1.5 rate-btn"></div>
    <div id="2" class="rate-btn-2 rate-btn"></div>
    <div id="2.5" class="rate-btn-2.5 rate-btn"></div>
    <div id="3" class="rate-btn-3 rate-btn"></div>
    <div id="3.5" class="rate-btn-3.5 rate-btn"></div>
    <div id="4" class="rate-btn-4 rate-btn"></div>
    <div id="4.5" class="rate-btn-4.5 rate-btn"></div>
    <div id="5"class="rate-btn-5 rate-btn"></div>
</div>

Jquery

<script>
    $(function(){ 
        $("#sent-form-msg").hide();

        $('.rate-btn').hover(function(){
            $('.rate-btn').removeClass('rate-btn-hover');
            var therate = $(this).attr('id');
            for (var i = therate; i >= 0; i--) {
                $('.rate-btn-'+therate).addClass('rate-btn-hover');
                $("#rating_number").text(therate);
            }
        });

        $('.rate-btn').click(function(){ 
            var logado = "<?= $_SESSION['user_id'] ?>"; 
            if(logado === ''){ 
                alert("Para avaliar o estabelecimento precisa estar logado aceda ao menu login para entrar na sua conta");
            }else{   
                var therate = $(this).attr('id');
                id_user_rate = "<?= $_SESSION['user_id'] ?>";
                var dataRate = 'act=rate&post_id=<?= $row->id; ?>&user_id='+id_user_rate+'&rate='+therate; //
                $('.rate-btn').removeClass('rate-btn-active');
                for (var i = therate; i >= 0; i--) {
                     $('.rate-btn-'+therate).addClass('rate-btn-active');
                     $("#rating_number").text(therate);
                }
                $.ajax({
                    type : "POST",
                    url : "ajax/processa_avaliacao.php",
                    data: dataRate,
                    success: success()
                });

                function success(){
                    $("#avaliacao").load("ajax/mostra-avaliacao.php?id_estabelecimento=<?= $row->id; ?>");
                    $("#numero_votos").load("ajax/mostra-votos.php?id_estabelecimento=<?= $row->id; ?>");
                    $("#sent-form-msg").fadeIn();
                    $("#sent-form-msg").fadeOut(5500).html("<p align='center'>Avaliação Submetida com sucesso! Obrigado pelo seu voto</p>");
                }
                return false; 
            }                   
        });
    });
</script>
2
  • Podes colocar o HTML renderizado? com PHP misturado fica dificil de ler. E um pedido: explica melhor o que deve acontecer no hover e o que está a acontecer que não está certo...
    – Sergio
    4/05/2015 às 21:44
  • Já melhorei o html sem o php a mistura e o seguinte o hover eu tenho 10 barras em fazer hover fica a barra azul o que esta acontecer e que passar por eles todos e fica a barra a cinzento todas e eu quero por exemplo fazes hover ate 4 que fique as barras azuis activadas ate a 4 barra 4/05/2015 às 21:57

1 Resposta 1

1

Podes usar o .prevAll() para isso, ele seleciona todos os siblings anteriores a esse elemento. Uso também o .andSelf() para juntar o elemento que está a ter :hover.

O código ficaria assim:

var rates = $('.rate-btn');
rates.hover(function () {
    rates.removeClass('rate-btn-hover');
    $(this).prevAll().andSelf().addClass('rate-btn-hover')
});

jsFiddle: http://jsfiddle.net/kapg3q98/

Podes também juntar

$('.rate-ex1-cnt').on('mouseleave', function(){
    rates.removeClass('rate-btn-hover');
});

para garantir que a classe é removida em todos os elementos quando o mouse sair.

jsFiddle: http://jsfiddle.net/kapg3q98/1/

1
  • 1
    Era mesmo isso que queria ficou muito bom. obrigado 4/05/2015 às 22:15

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 .