JQuery隐藏当前div并显示下一个

Question

我有一个创建 7 个 div 部分的页面，我将它们全部隐藏，除了第一个。每个 div 有 4 个问题。一旦他们回答了所有四个问题并单击下一个按钮，我想隐藏该 div 并显示下一个。在最后一个中，我将有提交按钮。我好像搞不懂。

我最近的尝试如下。

JQuery 在这里调用

$(document).ready(function() {
    $('#1').show();
    $('#2').hide();
    $('#3').hide();
    $('#4').hide();
    $('#5').hide();
    $('#6').hide();
    $('#7').hide();

    $('.article').click(function() { 
        $(this).parent('div').hide();
        $(this).next('div').show();
        return false;
    }); 
});

这里是前两个 HTML div 的示例，为了节省空间而删减了很多内容：

<div name="1" id="1">
    <span class="chapter">Chapter 1</span>
    <p>1. According to this training etc?
        <br>                    
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="23"> 1.
        <br>
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="24"> 2.
        <br>
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="25"> 3.
        <br>
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="26"> 4.
        <br>
        <br>
        <a href="#" class="article">Next</a>
    </p>
</div>

<div name="2" id="2" style="display: none;">
    <span class="chapter">Chapter  2</span>
    <p>5. question here
        <br>                    
        <input type="hidden" name="4" value="20">
        <br>
        <a href="#" class="article">Next</a>
    </p>
</div>

Answer 1

试试这个：

// onlclick of next button
$('.next').click(function() { 
    $(this).parents('div').hide();
    $(this).parents('div').next('div').show();

    return false;
});    

// onlclick of prev button
$('.prev').click(function() { 
     $(this).parents('div').hide();
     $(this).parents('div').prev('div').show();

     return false;
}); 

好吧，但这假设您的 first div 没有上一个按钮并且last div 没有下一个按钮
而且您要隐藏或显示的 div 是您的上一个/下一个按钮的第一个父 div

或者你需要给你的question divs一个你想要隐藏或显示的类(eg: question)，然后在上面的代码中用parents('.question')替换
parents('div')。

Answer 2

您可以将所有 div 存储在一个数组中并编写这样的函数：

var divArray = [];
for (var index = 1; index < 8; index++) {
   divArray[divArray.length] = $('#' + index);
}

function showDiv(showIndex) {
   for (var index = 0; index < divArray.length; index++) {
      if (index === showIndex) {
         $(divArray[index]).show();
      }
      else {
         $(divArray[index]).hide();
      }
   }
}

Answer 3

为除第一个输入之外的所有输入添加一个类并将显示设置为无。

.vis {
    display: none;
}

将所有 div 包装在一个包装 div 中，并在点击调用时分配一个 id 容器

var next_id = parseint($(this).attr('id')) + 1;

$(this).closest('div').hide();
$(this).closest('.container').find('#' + next_id).show();

Answer 4

这是一个很好的解决方案。

我已将类 show-hide 应用于您的所有 div，您想显示和隐藏。

因为在你的实际事情中，如果你要通过 div 找到它意味着你不能在你的内容框中添加 div。

所以最好添加这个类并使您的代码健壮。您只能在这里尝试。

$(document).ready(function() {
  $('.show-hide').hide();
  $('#1').show();
  $('.article').click(function() {
    $('.show-hide').hide();
    $(this).closest('.show-hide').hide().next('.show-hide').show();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div name="1" id="1" class="show-hide">
  <span class="chapter">Chapter 1</span>
  <p>1. According to this training etc?
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="23">1.
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="24">2.
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="25">3.
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="26">4.
    <br>
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="2" id="2" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  2</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="3" id="3" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  3</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="4" id="4" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  2</span>
  <p>5. question here
    <br>
    <input type="hidden" name="5" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="5" id="5" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  2</span>
  <p>5. question here
    <br>
    <input type="hidden" name="5" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="6" id="6" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  6</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="7" id="7" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  7</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="8" id="8" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  8</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

Answer 5

Here JSfiddle link is example

你只需要修改你的js

$('#1').show();
$('#2').hide();
$('#3').hide();
$('#4').hide();
$('#5').hide();
$('#6').hide();
$('#7').hide();

$('.article').click(function(){ 
    $(this).parent('div').hide().next('div').show();
    return false;
});