如何在jQuery中为变量添加最大值和最小值

Question

我正在制作一个菜单，显示您在我的网站上的哪个部分。我有 3 个圈子可以显示您所在的部分。

如果您点击“向下”，您将进入一个部分，如果您点击“向上”，您将返回一个部分。

现在我做到了，如果您单击“向下”，它会将 1 添加到变量“sectionCounter”，如果您单击向上，它会从中删除 1。

我想添加一个最小值为 1，一个最大值为 3，因为没有更多的部分，我该怎么做？

这是我的 jQuery：

    var sectionCounter = 1;
    sectionCounter == 1;

    $('.down1').click(function() {
        var section2 = $('.section2');
        var pos = section2.offset().top;
        sectionCounter += 1;
        $('h1').html(sectionCounter);

    if (sectionCounter == 1){
        $('.count1').addClass('countActive');
    }else {
        $('.count1').removeClass('countActive');
    };


    if (sectionCounter == 2){
        $('.count2').addClass('countActive');
    }else {
        $('.count2').removeClass('countActive');
    };


    if (sectionCounter == 3){
        $('.count3').addClass('countActive');
    }else {
        $('.count3').removeClass('countActive');
    };


    $('html, body').animate({scrollTop:pos},2000); // will take two seconds to scroll to the element
    });


    $('.up1').click(function() {
        var section1 = $('.section1');
        var pos2 = section1.offset().top;
        sectionCounter -= 1;
        $('h1').html(sectionCounter);

    if (sectionCounter == 1){
        $('.count1').addClass('countActive');
    }else {
        $('.count1').removeClass('countActive');
    };


    if (sectionCounter == 2){
        $('.count2').addClass('countActive');
    }else {
        $('.count2').removeClass('countActive');
    };


    if (sectionCounter == 3){
        $('.count3').addClass('countActive');
    }else {
        $('.count3').removeClass('countActive');
    };

    $('html, body').animate({scrollTop:pos2},2000); // will take two seconds to scroll to the element
    });

Answer 1

你有几个选择：

您可以使用if

if (sectionCounter < 3) {
    sectionCounter += 1; // Side note: `++sectionCounter;` or `sectionCounter++;` would be more idiomatic
}

-= 1 的情况类似：

if (sectionCounter > 1) {
    sectionCounter -= 1; // Side note: `--sectionCounter;` or `sectionCounter--;` would be more idiomatic
}

您可以（ab）使用&& 运算符：

sectionCounter < 3 && ++sectionCounter;

对于-= 1 案例也是如此：

sectionCounter > 1 && --sectionCounter;

这些工作是因为如果左侧操作数为真（或者更确切地说，truthy），则不会评估右侧操作数。

你可以使用Math.min/Math.max:

sectionCounter = Math.min(3, sectionCounter + 1);

和

sectionCounter = Math.max(1, sectionCounter - 1);