javascript - Jquery中达到数值后如何重置递增变量

Question

我正在创建一个极其简单的页面，当用户单击该页面时，背景和文本颜色将通过 6 个“主题”进行更改。我希望下面的循环在达到 6 后重置回 1。我知道这是一个不好的方法，但由于它不需要缩放，所以我不在乎。

我尝试在 if (clicks > 6) 内重置 clicks = 1，然后使用 return 退出范围，但我仍然遇到范围问题。这似乎遵循了网上的一些例子，但我看不出我错过了什么。看来要做到这一点真的很简单。

<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;
});

此方法的工作原理是将 (clicks+1) 除以 7 得到余数，即当 clicks 为 0-5 时为 clicks+1，或当 clicks=6 时为 0。