我可以使用“下一步”按钮，但不能使用“上一步”按钮。我做错了什么？

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();
  });
});

Answer 2

$(".previous")在$(document).ready之外，因此它会在设置html标记之前查找它们。将它移动到$(document).ready的回调中，您就应该设置好了。

Answer 3

出于各种原因，可以使用类来切换活动状态，但在本例中是为了简单起见。

将按钮的name属性的值设置为next或prev，这样就可以在方向逻辑中使用这些值。

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

​

$(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>

​