Question

我一直在研究这个upvote / downvote问题，我一直遇到3个问题。

代码：

$(function() {

$('button').click(function(e){

    e.preventDefault();

    var $this = $(this),
        $container = $(this).parent(),
        $buttons = $container.children('button'),
        $count = $container.children('.count'),
        was = $container.data('was');

    // 0 case
    if ($this.is('.up')) {
        if (was === 0 || $this.is('.active')) {
            vote = 0;
        } else {
            vote = 1;
        }
    } else {
        vote = -1;
    }

    if ( was + vote < 0 ) {
        $this.toggleClass('active');
        return false;
    }

    if( $this.hasClass('active') ){
        $this.toggleClass('active');
        $count.text( was );
    } else {
        if( $buttons.filter('.active').length ){
            $buttons.toggleClass('active');
        } else {
            $this.toggleClass('active');
        }
        $count.text( was + vote );
    }

});

});

现场演示：jsfiddle

我在演示中标记了每个案例（总共6个案例）

问题：

案例＃1：如果它上面有一个活动类，它最初是（data-was）0，那么点击下来应该添加一个活动类，将其变为红色并将计数保持为0。 / p>
案例＃2：如果活动类位于向下按钮且原始分数为（data-was）为1，则活动类应该继续，计数应该为3。 / p>
案例＃3：如果按钮上有一个up类，并且原始分数是（data-was）1，那么单击down将使其变为0并将活动类打开，单击应该让它从0移除活动类，然后单击活动类，然后将其恢复为1。

案例＃4 - ＃6都表现正常，所以如果不清楚问题是什么，它们应该都是这样，但从不低于0。

这一直变得复杂，所以我在辩论只是显示ajax请求的实际返回分数，但我不希望点击之间有任何延迟，所以这就是为什么我这样接近它。

Answer 1

我创建了一个演示，将逻辑简化为基本上2个步骤。如果另一个按钮处于活动状态，则第一步是进行调整，然后调整当前按钮。

最重要的变化是忘记“是”并且只使用“是”并存储任何更改。我想你会看到存储当前值，并使用它使代码更容易阅读和调试。

此外，我不会尝试为您当前的vote变量分配实际值，而是会注意到我只是使用加/减，这使得当您遇到许多逻辑分支（{{1 }}）。这也允许代码中的某些条件分离......例如，如果需要，首先执行重置，然后处理当前按钮。

DEMO：http://jsfiddle.net/TV7G4/6/

if

Answer 2

这是你fiddle updated。我有我认为你想要的功能。我没有使用data属性

需要弄清楚这个upvote / downvote边缘情况

2 个答案: