使用jQuery进行简单计数

使用jQuery进行简单计数,jquery,counter,Jquery,Counter,我有一组问题,想在上面显示一个简单的进度计数器。 下面的代码工作得很好,但我想知道是否有人可以建议重构,因为有更好的方法来实现这一点 var totalCount = $('#questions li').length, count = 1; $('.progress').html("Question " + count + " of " + totalCount); // Increment by 1 on each

我有一组问题,想在上面显示一个简单的进度计数器。 下面的代码工作得很好,但我想知道是否有人可以建议重构,因为有更好的方法来实现这一点

    var totalCount = $('#questions li').length,
        count = 1;
    $('.progress').html("Question " + count + " of " + totalCount);                 

    // Increment by 1 on each click
    $('.btn-next').click(function(){                        
        count ++ ;

        // remove current count
        $('.progress').empty();

        // drop in new count
        $('.progress').html("Question " + count + " of " + totalCount); 
    });

    // Decrease by 1 on each click
    $('.btn-prev').click(function(){
        count -- ;

        // remove current count
        $('.progress').empty();

        // drop in new count
        $('.progress').html("Question " + count + " of " + totalCount);
    });

你可以把代码弄干很多。试试这个:

var totalCount = $('#questions li').length + 1, // add 1 as .length is 0 based
    count = 1;

$('.btn-next, .btn-prev').click(function(){                        
    count = $(this).hasClass('btn-next') ? count - 1 : count + 1;
    $('.progress').html("Question " + count + " of " + totalCount) 
});

请注意,在替换
html()
时,您不需要使用
empty()

Hi Rory当我运行脚本时,这是17的输出问题NaN知道NaN是什么吗?
NaN
意味着结果不是一个数字-通常是试图对字符串和整数执行数学运算。你能把你的代码放到一个列表中,让我看看发生了什么吗?@bobby\u bob很抱歉这是我的错误-你不需要点击处理程序中count变量上的
var
关键字:我会更新我的答案@Rory。完全正确对于jQuery来说是相当陌生的,但是当您收到这样的帮助时,学习过程就会变得简单一点。谢谢你没问题,很乐意帮忙:)