Addclass Remove Class

Par Alex, il y a 10 ans

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, il y a 10 ans

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, il y a 10 ans

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, il y a 10 ans

Possible je ne connais pas le css relié..

Alex, il y a 10 ans
.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; }