簡單計數使用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) 
}); 

需要注意的是，你要替換的html()反正你不需要empty()。