Hover problem in system rating

Question

Hover problem in system rating

Navigation

#1 by (1 votes)

1

Good evening,

And the following made a rating system for my site it is working well just missing something that I am not able to do. I have a rating of 1 to 10 which looks like 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5 and 5 this is just working wanted to hover over it hover to another color and wanted that depending on the mouse is passed the other options of the rating is activated with the color at this time only activates one that is what I chose.

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>

html jquery

asked by anonymous 04.05.2015 / 23:41

1 answer

Multiple Access Instances For + slideToggle in Jquery does not work

score 1 · Accepted Answer

You can use .prevAll() to do this, it selects all siblings prior to this element. I also use .andSelf() to join the element that is :hover .

The code looks like this:

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

jsFiddle: link

You can also join

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

to ensure that the class is removed on all elements when the mouse exits.

jsFiddle: link