jquery - 使用 jQuery 进行简单计数

Question

我有一组问题，想在它们上方显示一个简单的进度计数器。下面的代码工作正常，但我想知道是否有人可以就重构提出建议，因为必须有更好的方法来实现这一点。

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

Answer 1

您可以大量干燥该代码。尝试这个：

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

请注意，您不需要，因为无论如何empty()您都在更换。html()