jquery - カウンターを特定の数に制限する方法は?

Question

次のボタンと前のボタンがクリックされた回数を追跡するカウンターを設定しました。

1. クリック = 1 つの前のボタンが表示されます
2. クリック = 9 次のボタンが消える

カウンターの量を制限したい。例 10 の場合。10 に達したら。

// Buttons
var count = 0;
$("#mod3-6-1_nextbutton").click(function() {
    $("#actions-container").css({
        "top" : "-=110px"
    });

    count += 1;
    counter();
});
$("#mod3-6-1_backbutton").click(function() {
    $("#actions-container").css({
        "top" : "+=110px"
    });
    count -= 1;
    counter();
});

function counter() {

    if (count == 0) {
        $("#mod3-6-1_backbutton").css({
            "top" : "-9999px",
            "left" : "-9999px",
        }); 
    }
    if (count == 1) {
        $("#mod3-6-1_backbutton").css({
            "top" : "20px",
            "left" : "44px",    
        }); 
    }
    if (count > 9) {
        $("#mod3-6-1_nextbutton").css({
            "top" : "-9999px",
            "left" : "-9999px",
        });
        $("#actions-container").css({
                 "top" : "-990px"
             });
    }
    else {
            $("#mod3-6-1_nextbutton").css({
                   "top" : "20px",
                  "left" : "700px",

        }); 
    }

}

Answer 1

これで作業が完了します

return (counter < 10);

これにより、カウンターが10になり、コードが実行されなくなると、戻り値がfalseに設定されます。falseが返されると、

   var count = 0;
$("#mod3-6-1_nextbutton").click(function() {
    count += 1;
    if (count > 9) {
        return false;
    }
    else if (count == 9) {
        // DO nothing
    }
    else {
        $("#actions-container").css({
            "top": "-=110px"
        });
    }
    counter();
});
$("#mod3-6-1_backbutton").click(function() {

    count -= 1;
    if (count > 9) {
        return false;
    }
    else if (count == 0) {
        // DO nothing
    }
    else {
        $("#actions-container").css({
            "top": "+=110px"
        });
    }
    counter();
});​

Answer 2

カウントが最大値より少ない場合にのみアクションを実行します。次のボタンが消えるため、カウントが最大値を超えることはありません。それを行うずさんな方法は、ただ言うことです

if (count < max) {
    // make sure the right button shows and
    // do stuff
} else {
    // make button disappear
}

これらの css 行を css クラスに置き換え、addClass()/removeClass() を使用してスタイルを実装することもできます。より堅牢にするために、持っているスライドの数から最大数を取得できます

var max = $('#slider .slides').length;

Answer 3

多くの重複したコードは、あなたがしなければならないことのほんの一例です。

var count = 0;
var LIMIT = 10;

$("#mod3-6-1_nextbutton, #mod3-6-1_backbutton").click(function() {
    var top, count;
    if($(this).is('#mod3-6-1_nextbutton')) {
        if(count == LIMIT) return false;
        top = "-=110px";
        val = 1;
    } else {
        top = "+=110px";
        val = -1;
    }

    $("#actions-container").css({
        "top" : top
    });
    count += val;
    counter();
});