Как сбросить инкрементную переменную после достижения числового значения в Jquery

Question

Я создаю чрезвычайно простую страницу, где фон и цвет текста будут меняться через 6 «тем», когда пользователь нажимает на страницу. Я хочу, чтобы приведенный ниже цикл сбрасывался обратно до 1, после достижения 6. Я знаю, что это плохой способ сделать это, но, поскольку он не требует масштабирования, мне все равно.

Я попытался сброситьclickks = 1 в пределах if (clicks> 6) и затем выход из области с возвратом, но у меня все еще есть проблемы с областью действия. Это, казалось, следовало за некоторыми примерами онлайн, и я не могу видеть то, что я пропускаю. кажется, что это было бы очень просто сделать.

<script>
    var clicks = 1;
    $('.foo').click(function() {
        if (clicks == 1){
            $('body, #change' ).addClass('pagetheme1');
            $('p' ).addClass('pagetheme1');
        } else if (clicks == 2){
            $('body, #change' ).addClass('pagetheme2');
            $('p' ).addClass('pagetheme2');
            $('body, #change' ).removeClass('pagetheme1');
            $('p' ).removeClass('pagetheme1');
        } else if (clicks == 3){
            $('body, #change' ).addClass('pagetheme3');
            $('p' ).addClass('pagetheme3');
            $('body, #change' ).removeClass('pagetheme2');
            $('p' ).removeClass('pagetheme2');
        } else if (clicks == 4){
            $('body, #change' ).addClass('pagetheme4');
            $('p' ).addClass('pagetheme4');
            $('body, #change' ).removeClass('pagetheme3');
            $('p' ).removeClass('pagetheme3');
        } else if (clicks == 5){
            $('body, #change' ).addClass('pagetheme5');
            $('p' ).addClass('pagetheme5');
            $('body, #change' ).removeClass('pagetheme4');
            $('p' ).removeClass('pagetheme4');
        } else if (clicks == 6){
            $('body, #change' ).addClass('pagetheme6');
            $('p' ).addClass('pagetheme6');
            $('body, #change' ).removeClass('pagetheme5');
            $('p' ).removeClass('pagetheme5');
            clicks=1;
        }
        }
        ++clicks;
    });
</script>

Answer 1

Используйте оператор по модулю

var clicks = 0;
$('.foo').click(function() {
    // ...
    clicks = (clicks + 1) % 7;
});

Это работает, давая вам остаток от (кликов + 1), деленный на 7, то есть клики + 1, когда клики 0-5, или 0, когда клики =6.