Простой подсчет с использованием jQuery

Question

У меня есть набор вопросов и вы хотите увидеть простую индикацию прогресса над ними. Код ниже работает нормально, но мне было интересно, может ли кто-нибудь посоветовать рефакторинг, поскольку theres должен стать лучшим способом достижения этого.

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() в любом случае.