onClick通過具有相同類的DIV循環

Question

我試圖創建一個腳本來循環具有相同類名的DIV（一次一個）。 .nextAll()和所有那些有趣的東西是完全陌生的我。我如何獲得這個功能？

下面是它應該如何工作。當您點擊右側的淺灰色框時，它應該顯示下一個.hint以及它的hint-description。一次只顯示一個提示。這應該是一個無限循環。意思是，在第三個提示之後，它應該再次從頂部開始。希望jsfiddle有道理。請讓我知道如果它不是！

http://jsfiddle.net/DzD5W/1/

Answer 1

這裏是一個辦法做到這一點：

(function(){ 

    var $hints = $('.hint'); 
    var $hintDescriptions = $('.hint-description'); 
    var i = 0; 

    $('.next-hint').on('click', function(){ 
     i = (i + 1) % $hints.length; 
     $hints.hide().eq(i).show(); 
     $hintDescriptions.hide().eq(i).show(); 
    }); 

})(); 

Updated JSFiddle