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箭头。当添加了karma-up-selected或karma-down-selected类时，我的css会用更合适的图像覆盖背景。

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

实际上做了我想要的但是他们彼此独立。如果单击karma-up，则需要取消选择karma-down（如果先前已选择），反之亦然。

我认为我需要使用hasClass，removeClass和addClass的很多if，但我想看看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();
});

所以现在它会打开和关闭点击的项目，但也会从相对的项目中删除点击统计数据。

使用jQuery的Reddit Style选民

1 个答案: