我试图弄清楚如何动态限制jQuery计数器超过列表中的项目数。
这是我的代码。
HTML：

<div class="mobile-nav">
            <div class="left-platform-arrow"></div>  
            <div class="counter">
                <span class="number">1</span>
                <span>/</span>
                <span class="label">1</span> 
            </div>    
            <div class="right-platform-arrow"></div>     
        </div>

jQuery：

$('.right-platform-arrow').on('click', function(){
    $('.left li.selected').next().addClass('selected');
    $('.left li.selected').prev().removeClass('selected');
    $('.main .right .pane-open').next().addClass('pane-open');
    $('.main .right .pane-open').prev().removeClass('pane-open');       
    $('.number').text(function(i, t) {
        return Number(t) + 1;
    });
}); 
$('.left-platform-arrow').on('click', function(){
    $('.left li.selected').prev().addClass('selected');
    $('.left li.selected').next().removeClass('selected');
    $('.main .right .pane-open').prev().addClass('pane-open');
    $('.main .right .pane-open').next().removeClass('pane-open');
    $('.number').text(function(i, t) {
        return Number(t) - 1;
    });
}); 
$(".left .label").text(function() {
    return $(this).closest(".left").find("li").length;
});

您可以在http://clearleap.com/platform/the-clearleap-platform/clearplay/上看到当前的代码（它只显示在移动的设备上，所以可以从手机上查看）。
问题是，如果您继续单击左箭头或右箭头，则数量将超过项目的最大数量。例如，你可以让它显示77/5，这是一个相当烦人的小故障。
我该如何解决这个问题？