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

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> 之外。并且仅使用两个按钮即可进行导航。然后使用一个事件类，为 <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();
  });
});