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になります。アクティブなクラスを上から削除し、アクティブなクラスを下に向けて上をクリックすると、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 に答える