javascript - 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 div 一个类 (eg: question) 你想隐藏或显示然后替换
parents('div') 与上面代码中的 parents('.question')