1

我一直在研究这个赞成/反对票问题，并且一直遇到 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 ​</p>

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

问题：

  • 案例#1：如果上面有一个活动类并且它最初是（data-was）0，那么点击向下应该添加一个活动类向下将其变为红色并保持计数为0。

  • 案例 #2：如果活动班级在向下按钮上，并且原始分数（数据是）为 1，那么活动班级应该继续向上，并且计数应该达到 3。

  • 案例#3：如果按钮上有一个向上类并且原始分数是（data-was）1，那么单击向下应该使其变为0并将一个活动类放在向下，单击向上应该使其变为0从 up 中删除活动类，然后在向下单击活动类的情况下单击应该将其返回到 1。

案例 #4 - #6 都表现正常，所以如果不清楚问题出在哪里，它们都应该表现得如此，但永远不要低于 0。

这变得有点复杂，所以我正在辩论只是显示来自 ajax 请求的实际返回分数，但我不希望点击之间有任何延迟，所以这就是我以这种方式接近它的原因。

4

2 回答 2

0

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

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

另外，我不会尝试为当前vote变量分配实际值，而是会注意到我只是使用加/减，当您遇到许多逻辑分支​​（很多if）时，它会变得容易得多。这也允许在代码中分离一些条件......例如，如果需要，首先进行重置，然后处理当前按钮。

演示：http: //jsfiddle.net/TV7G4/6/

$('button').click(function(e) {
    e.preventDefault();
    var $this = $(this),
        $container = $(this).parent(),
        $count = $container.find('.count'),
        curr_votes = $container.data('vote_count'),
        is_upVote = $this.hasClass('up'),
        this_active = $this.hasClass('active'),
        $otherButton = $this.siblings('.vote'),
        vote_change = 0;


    /* reset vote_count if other already active*/
    if ($otherButton.is('.active')) {
        $otherButton.removeClass('active');
        is_upVote ? vote_change++ : vote_change--;

    }

    /* adjust vote_count for this action */
    if (this_active) {
        is_upVote ? vote_change-- : vote_change++;
    } else {
        is_upVote ? vote_change++ : vote_change--;
    }


    /* always toggle class on curent button*/
    $this.toggleClass('active');

    /* update vote count */
    curr_votes += vote_change;
    curr_votes = curr_votes < 0 ? 0 : curr_votes;

    $count.text(curr_votes);
    /* store the current value*/
    $container.data('vote_count', curr_votes);



});
于 2012-11-10T13:22:43.703 回答
0

这是你的小提琴更新。我有我认为你想要的功能。我没有使用该data属性

于 2012-11-10T14:04:38.270 回答