Addclass Remove Class

Alex
Javascript

Salut tout le monde, j'ai un petit problème enfaite, j'ai suivie le tutoriel de Like Dislike de Grafikart, mais d'une autre façon, et tout marche pas bien niveau PHP & HTML no problem.
Mais maintenant que je suis au JQuery / JS j'ai un problème:
Lorsqu'on dislike, la classe vote_disliked ou vdisliked(pour moi) , met en dislike les deux pouces: Voici ce qu'il arrive si vous avez pas compris:
**
Si vous voyez pas le GIF: http://img11.hostingpics.net/pics/576323ProblmeGrafikart.gif

Ce GIF est la réalité hein,
DOnc voici mon code HTML:

  <div class="vbtns" id="vote" data-id="<?php echo $poste->id; ?>">

        <button class="fa fa-thumbs-up vlike vbtn <?php if($req->rowCount() > 0 && $dliked->type == 1) { ?>vliked<?php } ?>"/> <span id="likes_count"><?php echo $poste->likes ?></span> </button>
        <button class="fa fa-thumbs-down vdislike vbtn <?php if($req->rowCount() > 0 && $dliked->type == -1) { ?>vdisliked<?php } ?>"/> <span id="dislikes_count"><?php echo $poste->dislikes ?> </span></button>
  </div>

Et voici ici donc le code Jquery:

$(document).ready(function(){

    var $vote = $('#vote');
    $('.vlike', $vote).click(function(e){
        e.preventDefault();
        vote(1);
    })
    $('.vdislike', $vote).click(function(e){
        e.preventDefault();
        vote(-1);
    })

    function vote(value){
        $.post('vote.php', {
            id: $vote.data('id'),
            type: value

        }).done(function(data, textSatus, jqXHR){
            $('#dislikes_count').text(data.dislikes_count);
            $('#likes_count').text(data.likes_count);
            $vote.removeClass('vdisliked');
            $vote.removeClass('vliked');
            if(value == 1){
                $vote.addClass('vliked');
            }
            else {
                $vote.addClass('vdisliked');
            }
        }).fail(function( jqXHR, textSatus, errorThrown ){
            alert(jqXHR.responseText);
        });
    }

})

Je ne comprends pas le problème, donc merci aux personnes qui vont essayer ou donner une aide à ce problème ! :D

4 réponses

antho07

Bonjour,

je ne sais pas si c'est normal mais là ton code met les classes à la div id="vote" engloblante et pas aux boutons dedans...

Alex
Auteur

Et bien c'est comme dans le code de grafikart:

var $vote = $('#vote');
            $('#dislike_count').text(data.dislike_count);
            $('#like_count').text(data.like_count);
            $vote.removeClass('is-liked is-disliked is-score1 is-score2 is-score3 is-score4 is-score5');
                   if(value == 1){
                        $vote.addClass('is-liked');
                    } else{
                        $vote.addClass('is-disliked');
                    }
antho07

Possible je ne connais pas le css relié..

Alex
Auteur 
.vbtn{
   cursor: pointer;
   background: transparent;
   transition: color 0.3s;
}

.vlike:hover{
    color:green;
}

.vdislike:hover{
    color:red;
}

.vbtn{
   border: none;
   padding: 0;
   display: inline-block;
   margin: 0 0 0 10px;
   cursor: pointer;
   background: transparent;
   transition: color 0.3s;
}

.vbtns{
   margin-top: 10px;
   margin-right: 50px;
   text-align: right;
}

.vliked {
    color: green;
}

.vdisliked {
    color:red;
}