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

您可以使用.data()来存储反映.question-item元素索引的整数，.length，使用++和%运算符循环传递到.eq()的索引，从当前索引或0到.question-items.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>

Answer 3

检查当前可见.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>