Question

我有一套表格，一次只显示一个表格。一旦用户填写了表单并单击下一步，则当前表单将隐藏并显示下一个表单。还有一个“后退”按钮，以便在用户需要修改任何字段时可以遍历表单。我认为我采取的方法不太正确。因此需要您的帮助。

$(document).ready(function() {
  $('.form-continue').click(function() {
    $(this).parents('.forms-wrapper').addClass('d-none');
    $(this).parents('.forms-wrapper').next('.forms-wrapper').removeClass('d-none');
  });
});

.col-centered {
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6 col-centered">
      <div class="forms-wrapper mb-5">
        <a class="btn btn-outline-secondary mb-4">Back</a>
        <p>Form 1</p>
        <form>
          <div class="form-group">
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <a class="btn btn-primary form-continue">Next Form</a>
        </form>
      </div>


      <div class="forms-wrapper mb-5 d-none">
        <a class="btn btn-outline-secondary mb-4">Back</a>
        <p>Form 2</p>
        <form>
          <div class="form-group">
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <a class="btn btn-primary form-continue">Next Form</a>
        </form>
      </div>


      <div class="forms-wrapper d-none">
        <a class="btn btn-outline-secondary mb-4">Back</a>
        <p>Form 3</p>
        <form>
          <div class="form-group">
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <a class="btn btn-primary form-continue">Finish</a>
        </form>
      </div>

    </div>
  </div>
</div>

Answer 1

您可以尝试下面的代码片段以了解其功能。您还可以根据需要添加验证。

有关更多详细信息，请参见This Link

jQuery在单击下一步时显示和隐藏表单

1 个答案: