Reddit Style Voters avec jQuery

Question

J'essaie de copier les boutons de vote de reddit mais je suis un peu nouveau à jQuery donc j'ai des défis. Mon bloc HTML ressemble à:

<ul class="karma-controls"> 
    <li class="karma-control karma-up karma-up-selected"><a href=""></a></li> 
    <li class="karma-total">1</li> 
    <li class="karma-control karma-down"><a href=""></a></li> 
</ul> 

Le css donne simplement .karma-up/.karma vers le bas, il karma_up.png et de karma_down.png respectifs flèche. Lorsque la classe karma-up-selected ou karma-down-selected est ajoutée, mon css écrase juste l'arrière-plan avec une image plus appropriée.

$(this).closest(".karma-up").toggleClass("karma-up-selected"); 
$(this).closest(".karma-down").toggleClass("karma-down-selected"); 

Fait effectivement ce que je veux, mais ils sont indépendants les uns des autres. Si l'on clique sur karma-up alors le karma-down doit être désélectionné (si précédemment sélectionné) et vice versa.

Je pense que je vais avoir besoin de beaucoup de choses avec hasClass, removeClass et addClass mais je veux voir ce que la communauté SO pense.

Answer 1

Voici une solution qui utilise une seule fonction de clic entre les deux éléments:

$('.karma-down a, .karma-up a').click(function(e){ 
    var $parent = $(this).parent(), 
     up  = $parent.hasClass('karma-up'); 

    $parent.toggleClass("karma-" + (up ? 'up' : 'down') + "-selected"); 
    $parent.siblings().removeClass("karma-" + (up ? 'down' : 'up') + "-selected"); 

    e.preventDefault(); 
}); 

Alors maintenant, il permet de basculer l'élément cliqué sur et en dehors, mais supprime également le clic stat de l'élément opposé.