jQuery .next（）div顯示所有同級而不是一個

Question

我正在測試分頁類型，其中按鈕位於與目標不同的div上。

當我嘗試切換身體的下一個div時，它們都在切換，而不僅僅是一個。

 $('#next_q').on('click', function(){ $('.question-item').hide().next('.question-item').show(); }) 

 .question-item:not(:first-child){display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box-body"> <div class="question-item">Q1</div> <div class="question-item">Q2</div> <div class="question-item">Q3</div> </div> <div class="box-footer"> <button>Prev</button> <button id="next_q">Next</button> </div> 

Answer 1

使用:visible選擇question-item當前可見

$('#next_q').on('click', function(){
    $('.question-item:visible').hide().next('.question-item').show();
})

另外，如果您不希望“跳過”最后一個元素，請使用

if ($('.question-item:visible').prev('.question-item').length)

 $('#next_q').on('click', function() { if ($('.question-item:visible').next('.question-item').length) $('.question-item:visible').hide().next('.question-item').show(); }) $('#prev_q').on('click', function() { if ($('.question-item:visible').prev('.question-item').length) $('.question-item:visible').hide().prev('.question-item').show(); }) 

 .question-item:not(:first-child) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box-body"> <div class="question-item">Q1</div> <div class="question-item">Q2</div> <div class="question-item">Q3</div> </div> <div class="box-footer"> <button id="prev_q">Prev</button> <button id="next_q">Next</button> </div> 

Answer 2

檢查當前可見的.question-item並將其隱藏，然后顯示下一個.question-item 。 我還添加了not last-child選擇器，因為我認為您可能想停在最后一個問題。

  $('#next_q').on('click', function(){ $('.question-item:visible:not(:last-child)').hide().next('.question-item').show(); }); $('#prev_q').on('click', function(){ $('.question-item:visible:not(:first-child)').hide().prev('.question-item').show(); }); 

 .question-item:not(:first-child){display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box-body"> <div class="question-item">Q1</div> <div class="question-item">Q2</div> <div class="question-item">Q3</div> </div> <div class="box-footer"> <button id="prev_q">Prev</button> <button id="next_q">Next</button> </div> 

Answer 3

您可以使用.data()存儲反映.question-item元素.length索引的整數，使用++和%運算符循環從當前索引或0到.question-items傳遞給.eq()索引.length

 $('#next_q') .data({ "index": 0, items: $(".question-item") }) .on("click", function() { $(this).data().items .hide() .eq(++$(this).data().index % $(this).data().items.length) .show(); }) 

 .question-item:not(:first-child) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <div class="box-body"> <div class="question-item">Q1</div> <div class="question-item">Q2</div> <div class="question-item">Q3</div> </div> <div class="box-footer"> <button>Prev</button> <button id="next_q">Next</button> </div>