Question

我有一段HTML：

<form>
    <section>
        <div class="row normalTopPadding personalInfomation">
            <!--Loads of HTML and Stuff-->
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>

    <section>
        <div class="row normalTopPadding employerInfomation">
            <!--Loads of HTML and Stuff-->
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>

    <section>
        <div class="row normalTopPadding accountInfomation">
            <!--Loads of HTML and Stuff-->
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>
</form>

我想要实现的是每次单击按钮以隐藏单击该按钮的面板并向下显示下一个面板，所以。

<script>
$('.personalInfomation .reg-next-button, .employerInformation .reg-next-button', .accountInformation .reg-next-button').click(function (e) {
    // Get the section that this button lives in
    var form = $(this).closest("section");

    //validation and other functions commented out for ease of reading

    // Hide this section...
    section.toggle();
    // And show the next section
    section.next().toggle();

});
</script>

尽管这会隐藏单击按钮的部分，但不会显示下一个按钮。

有人可以指出我的错误吗？

谢谢， C

Answer 1

您可以先隐藏所有部分，然后单击a，找到要显示的下一个.row。

请参见下面的演示

$('.row').not(':first').css('display', 'none');

$('.row > a').click(function() {
  $(this).parents('.row').toggle();
  $(this).parents('section').next('section').find('.row').toggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <section>
    <div class="row normalTopPadding personalInfomation">
      <!--Loads of HTML and Stuff-->
      <a id="myButton" class="reg-next-button btn btn-default">Next 1</a>
    </div>
  </section>

  <section>
    <div class="row normalTopPadding employerInfomation">
      <!--Loads of HTML and Stuff-->
      <a id="myButton" class="reg-next-button btn btn-default">Next 2</a>
    </div>
  </section>

  <section>
    <div class="row normalTopPadding accountInfomation">
      <!--Loads of HTML and Stuff-->
      <a id="myButton" class="reg-next-button btn btn-default">Next 3</a>
    </div>
  </section>
</form>

Answer 2

您可以检查下一部分是否可用，然后隐藏当前部分。

注意：您的jquery选择器中有多余的单引号，我已将其删除。另外，您已经声明了变量form但使用了section，因此将表单重命名为section

$('.personalInfomation .reg-next-button, .employerInformation .reg-next-button, .accountInformation .reg-next-button').click(function (e) {
    // Get the section that this button lives in
    var section = $(this).closest("section");

    //validation and other functions commented out for ease of reading

    // Hide this section...
    var $next = section.next();
    if($next.length>0) {  // check condition first and then hide current section and show next
       section.toggle();
      // And show the next section
      $next.toggle();
   }
});

您可以将其概括化并改进代码，而不必将每个部分放入按钮单击处理程序中，从而在添加新部分时无需更改脚本。

注意-请勿将多个html元素使用与您用于按钮相同的id

$(function(){
$('section .row.normalTopPadding .reg-next-button').on('click', function (e) {
  var section = $(this).closest("section");
  var $next = section.next();
  if($next.length>0) {  // check condition first and then hide current section and show next
      section.addClass('hide');
      $next.removeClass('hide');
   }
});
});

.hide {
 display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <section>
        <div class="row normalTopPadding personalInfomation">
            <!--Loads of HTML and Stuff-->
            This is SECTION 1
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>

    <section class="hide">
        <div class="row normalTopPadding employerInfomation">
            <!--Loads of HTML and Stuff-->
            This is SECTION 2
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>

    <section class="hide">
        <div class="row normalTopPadding accountInfomation">
            <!--Loads of HTML and Stuff-->
            This is SECTION 3
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>
</form>

切换下一部分

2 个答案: