jQuery onclick按钮下一步

Question

我的表格需要帮助。我对jQuery的了解很差，下面我在Google上找到了这个代码。我需要表格，并且我知道如何在HTML5和CSS3中创建表单，但是我不知道如何在jQuery中使用hide和显示选项，并与下一个按钮连接。

我想这样做https://s24.postimg.org/l8ogszanp/form.png

 var step=1;
  $("#next").on("click")
  function{
    $("step"+step).hide();
    step+=1
    $("steo"+step).show(); 
  }

.step1 {
    display: block;
    background-color: silver;
  }
  .step2 {
    display: none;
    background-color: yellow;
  }
  .step3 {
    display: none;
    background-color: green;
  }
  .step4 {
    display: none;
    background-color: red;
  }
  .step5 {
    display: none;
    background-color: blue;
  }

<div class="container">
  <form>
    <div class="step1">
    <p>Content 1</p>
    <button id="next">NEXT</button>
    </div>
    <div class="step2">
    <p>Content 2</p>
    <button id="next">NEXT</button>
    </div>
    <div class="step3">
    <p>Content 3</p>
    <button id="next">NEXT</button>
    </div>
    <div class="step4">
    <p>Content 4</p>
    <button id="next">NEXT</button>
    </div>
    <div class="step5">
    <p>Content 5</p>
    <button id="next">NEXT</button>
    </div>
  </form>
</div>

Answer 1

看起来您缺少一个点。

  function{
$(".step"+step).hide();
step+=1
$(".step"+step).show(); 
 }

Answer 2

1. 您不需要那么多的"下一个"按钮。对于ID，您只能在页面上有一个，在这种情况下，可以重复使用每个项目。
2. 您需要在"步骤"中添加类指标$(".step" + step)...
3. .on('click', function()...代码形成不当。

下面的片段应有助于将您推向正确的方向。

var step = 1;
$("#next").on("click", function(e) {
  e.preventDefault();
  $(".step" + step).hide();
  step+= 1;
  $(".step" + step).show();
});

.step1 {
  display: block;
  background-color: silver;
}
.step2 {
  display: none;
  background-color: yellow;
}
.step3 {
  display: none;
  background-color: green;
}
.step4 {
  display: none;
  background-color: red;
}
.step5 {
  display: none;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <form>
    <div class="step1">
      <p>Content 1</p>
    </div>
    <div class="step2">
      <p>Content 2</p>
    </div>
    <div class="step3">
      <p>Content 3</p>
    </div>
    <div class="step4">
      <p>Content 4</p>
    </div>
    <div class="step5">
      <p>Content 5</p>
    </div>
    <button id="next">NEXT</button>
  </form>
</div>