Question

我试图弄清楚如何动态限制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，这是一个相当烦人的故障。

我该如何解决这个问题？

Answer 1

如果你正在做一个ul li列表，那么你可以通过使用

找到ul的孩子的出现来计算最大值

$('ul').children().length;

我已经在这里实现了一个jsfiddle：

http://jsfiddle.net/LKTQT/2/

我已经做到这一点，每次按下右键时，都会解析该值，以便将其识别为整数。然后有一个if确保该值不超过列表中的最大子项数。

（我刚刚用第二个版本替换了jsfiddle，其中包含一个左键示例，因为我注意到在你的网站上它还允许你进入负值）。

防止jQuery计数器超过列表项的数量

1 个答案: