Jquery onclick按钮NEXT形式

Question

我的表格需要帮助。我对jQuery的了解很差，我在google上找到了这个代码。我需要表单，我知道如何在HTML5和CSS3中使用创建表单，但我不知道如何在jQuery中使用HIDE和SHOW选项，并使用NEXT按钮连接。

我想这样做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. 你不需要那么多＆＃34; next＆＃34;纽扣。对于ID，您应该只在页面上有一个，在这种情况下，它可以重复用于每个项目。
2. 您需要在步骤调用$(".step" + step)...
中添加班级指标
3. .on('click', function()...代码格式不正确。

下面的代码片段可以帮助您向前推进正确的方向。

＆＃13;
＆＃13;
var step = 1;
$("#next").on("click", function(e) {
  e.preventDefault();
  $(".step" + step).hide();
  step+= 1;
  $(".step" + step).show();
});
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;