jquery - 如何将计数器限制为特定数字？

Question

我设置了一个计数器来跟踪单击下一个和上一个按钮的次数。

1. click = 一个上一个按钮出现
2. click = 九个 Next 按钮消失

我想限制计数器的数量。例如 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();
});