Как добавить максимум и минимум к переменной в jQuery - PullRequest
0 голосов
/ 23 декабря 2018

Я делаю меню, которое показывает, в каком разделе вы находитесь, на моем сайте.У меня есть 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
    });

1 Ответ

0 голосов
/ 23 декабря 2018

У вас есть несколько вариантов:

Вы можете использовать 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;

Это работает, потому что правый операнд неоценивается, если левый операнд имеет значение true (или, скорее, truey ).

Вы можете использовать Math.min / Math.max:

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

и

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