Избиратели стиля Reddit с jQuery

Question

Я пытаюсь скопировать кнопки голосования Reddit, но я немного новичок в jQuery, поэтому у меня проблемы. Мой HTML-блок выглядит так:

<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> 

CSS просто выдает .karma-up / .karma-down, это соответственно karma_up.png и karma_down.png arrow. при добавлении выбранного класса кармы или выбранного кармы мой css просто перезаписывает фон более подходящим изображением.

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

На самом деле делает то, что я хочу, но они независимы друг от друга. Если щелкнуть вверх по карме, то нужно отключить карму вниз (если она была выбрана ранее) и наоборот.

Я думаю, мне понадобится много if, если есть hasClass, removeClass и addClass, но я хочу посмотреть, что думает сообщество SO.

Answer 1

Вот решение, которое использует функцию одного клика между двумя элементами:

$('.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();
});

Так что теперь он включает и выключает нажатый элемент, а также удаляет статистику кликов у противоположного элемента.