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();
})

如果你不希望＆＃34;跳过＆＃34;超过最后一个元素，使用

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

＆＃13;

＆＃13;

$('#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();
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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索引的整数，使用++和%运算符来循环传递的索引从当前索引到.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>