我可以让下一个按钮工作，但不能让上一个按钮工作。 我究竟做错了什么？

Question

我正在尝试使用 jQuery 创建一个多步骤表单。 我有下一个按钮可以工作并显示下一个字段集，但我无法获得上一个按钮来显示上一个字段集。 我对此非常满意，因此将不胜感激。

<form action="">
  <fieldset>
    <h2>First Name</h2>
    <input type="text" name="firstname" placeholder="First Name" />
    <input
      type="button"
      name="next"
      class="next action-button"
      value="Next"
    />
  </fieldset>
  <fieldset>
    <h2>Last Name</h2>
    <input type="text" name="lastname" placeholder="Last Name" />
    <input
      type="button"
      name="prev"
      class="previous action-button"
      value="Previous"
    />
    <input
      type="button"
      name="next"
      class="next action-button"
      value="Next"
    />
  </fieldset>
  <fieldset>
    <h2>Email</h2>
    <input type="text" name="email" placeholder="Email" />
    <input
      type="button"
      name="previous"
      class="previous action-button"
      value="Previous"
    />
    <input
      type="button"
      name="submit"
      class="submit action-button"
      value="Submit"
    />
  </fieldset>
</form>

$(document).ready(function() {
  $(".next").click(function() {
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    next_fs.show();
  });
});

$(".previous").click(function() {
  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();
  previous_fs.show();
});

Answer 1

另一种方法是将这两个操作保留在<fieldset>之外的单个方法中。 并且只使用两个按钮进行导航。 然后使用活动的 class 来显示<fieldset> 。

按钮的操作如下所示：

$(document).ready(function() {
  $('.next, .prev').click(function(e) {
    e.preventDefault();
    current = $('fieldset.active');
    $(current).removeClass('active').hide();

    nextPrev = $(this).hasClass('next') ? $(current).next() : $(current).prev();

    $(nextPrev).addClass('active').show();
  });
});

Answer 2

$(".previous") 在 $(document).ready 之外，所以它在设置 html 标签之前寻找它们。 将它移动到 $(document).ready 的回调中，你应该已经设置好了。

Answer 3

出于各种原因，使用类来切换活动的 state，但为了简单起见，在您的情况下。

为您的按钮name属性赋予next或prev的值，以便您可以在方向逻辑中使用这些值。

单击.next或.previous按钮时，找到下一个目标（使用我们之前在按钮上设置的 next 和 prev 方向值），删除当前活动的 state 并应用于新元素。

 $(function() { var active = $('fieldset.active') $('.next, .previous').click(function(e) { e.preventDefault(); var target = $(this).closest('fieldset')[this.name](); if (target.length) { active.removeClass('active'); target.addClass('active'); active = target; } }); });

 fieldset { display: none; } fieldset.active { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action=""> <fieldset class="active"> <h2>First Name</h2> <input type="text" name="firstname" placeholder="First Name" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2>Last Name</h2> <input type="text" name="lastname" placeholder="Last Name" /> <input type="button" name="prev" class="previous action-button" value="Previous" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2>Email</h2> <input type="text" name="email" placeholder="Email" /> <input type="button" name="prev" class="previous action-button" value="Previous" /> <input type="button" name="submit" class="submit action-button" value="Submit" /> </fieldset> </form>