javascript - 如何一次只显示一个文本框并单击下一步显示下一个输入字段

Question

我有三个字段和一个下一步按钮。单击下一步按钮后，我必须一一显示每个字段。意味着我一次只能显示一个字段。 例如。单击下一个按钮后，第一个文本框显示下一个按钮，然后显示第二个文本框，下一个按钮与第三个按钮相同，但这次没有下一个按钮。它将显示提交按钮。你能帮我解决这个问题吗？

.steps{
  max-width:500px;
  height:auto;
  margin:0 auto;
  padding:70px 0;
  background:#ffffff;
  border:1px solid #e1e8f2;
  position:relative;
  text-align:center;
}
label
{ 
  display: block;
}
.field-set
{
  text-align: left;
}

<div class="steps">
  <p class="form_title">Please Fill The field Bellow</p>
  <form action="#" method="post" autocomplete="off">

    <div class="field-set">
    <label>name</label>
      <input type="text"  id="name" name="name" placeholder="Enter You Name"/>						
    </div>

      <div  class="field-set">
      <label>Email</label>
        <input type="email" id="email" name="email" placeholder="Enter You Email"/>	
      </div>

      <div  class="field-set">
      <label>mobile</label>
        <input type="text"  id="mob" name="mob" placeholder="Enter Your mobile no"/>	
      </div>

      <div  class="field-set">
        <input type="submit" name="next" value="next" id="click_next">	
      </div>

  </form>
</div>

Answer 1

尝试类似的东西

var count = $(".field-set").length - 1;
var countshow = 1;
$("#click_next").click(function(e) {
  e.preventDefault()
  $(".field-set").eq((countshow - 1)).hide();
  if (count > countshow) {
    $(".field-set").eq(countshow).show();
    countshow++;
  } else {
    $("form").unbind("submit").submit();
  }
})

我还更改了您的一些 css。

.field-set {
  text-align: left;
  display: none;
}

.field-set:first-of-type,
.field-set:last-of-type {
  display: block;
}

var count = $(".field-set").length - 1;
var countshow = 1;
$("#click_next").click(function(e) {
  e.preventDefault()
  $(".field-set").eq((countshow - 1)).hide();
  if (count > countshow) {
    $(".field-set").eq(countshow).show();
    if ((count - 1) == countshow) {$(this).val("sumbit")}
  } else {
    $("form").unbind("submit").submit();
  }
  countshow++;

})

.steps {
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  padding: 70px 0;
  background: #ffffff;
  border: 1px solid #e1e8f2;
  position: relative;
  text-align: center;
}

label {
  display: block;
}

.field-set {
  text-align: left;
  display: none;
}

.field-set:first-of-type,
.field-set:last-of-type {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--  start Form Steps  -->
<div class="steps">
  <p class="form_title">Please Fill The field Bellow</p>
  <form action="#" method="post" autocomplete="off">

    <div class="field-set">
      <label>name</label>
      <input type="text" id="name" name="name" placeholder="Enter You Name" />
    </div>

    <div class="field-set">
      <label>Email</label>
      <input type="email" id="email" name="email" placeholder="Enter You Email" />
    </div>

    <div class="field-set">
      <label>mobile</label>
      <input type="text" id="mob" name="mob" placeholder="Enter Your mobile no" />
    </div>

    <div class="field-set">
      <input type="submit" name="next" value="next" id="click_next">
    </div>

  </form>


</div>
<!--  End Form Steps  -->