单击后显示新表单

Question

我试图实现一个三步式表格系统。基本上，当您加载页面时，将显示表单的第一步。完成后，用户点击＆＃34;下一步＆＃34;按钮，表单编号2出现，依此类推。

但是我坚持使用JS代码。我不知道该怎么做。

我的逻辑只是将父元素（.step）放在display：none中，在用户单击按钮后，在display：block中进行下一步。你觉得怎么样？

（这显然是一个原型，div将被替换为）

My codepen

HTML：

<div class="steps">
  <div class="step step1">
    Step 1/3
  </div>
  <div class="step step2">
    Step 2/3
  </div>
  <div class="step step3">
    Step 3/3
  </div>
</div>

<button type="submit" class="btn next-step">Next step</button>

CSS：

.step {
  display: none;

  &.is-active {
    display: block;
  }
}

Javascript（ES5 / 6），而不是jQuery

const btnStep = document.querySelector('.next-step');
const steps   = [].slice.call(document.querySelector('.steps').children);

btnStep.addEventListener('click', () =>
  steps.forEach(step => {
    // if (step.classList.contains('is-active')) {
    //   step.classList.remove('is-active')
    // }
    step.nextElementSibling.classList.add('is-active')

  })
)

非常感谢。

Answer 1

我认为你应该使用一个计步器。你应该计算js中的步数并将它们放在一个名为＆＃34; numberOfSteps＆＃34;的变量中。所以你总是可以添加更多步骤。然后制作两个方法，一个用于递增，一个用于递减，并相应地更改计数器。然后如果（stepCounter === numberOfSteps），显示提交按钮。

尝试将所有逻辑放在不同的函数中，并使用相应的事件处理程序（单击等）调用它们。

希望这能让你顺利上路。祝你好运！

Answer 2

我不确定在第三步之后你想要什么样的行为

但这是我的解决方案，我不确定这是你想要它的工作方式 https://jsfiddle.net/b5kvksau/

  var x = 1;

  function ini() {

    if (x == 1) {
      document.querySelector(".step1").classList.toggle("is-active");
      document.querySelector(".step2").classList.toggle("is-active");
      x++;
      console.log(x);
    } else if (x == 2) {
      document.querySelector(".step2").classList.toggle("is-active");

      document.querySelector(".step3").classList.toggle("is-active");
      x++;
      console.log(x);
    } else if (x == 3) {
      document.querySelector(".step3").classList.toggle("is-active");
      document.querySelector(".hello-world").innerHTML = "All done!";
      x = 5; // Add your desired execution after 3/3 steps of the form are completed
    }
  }

在“x = 5”时只需添加表单完成时的代码，如果它将是重定向或其他什么

它非常简单但更简单，它更容易调试和实现

Answer 3

我HAd一点时间，所以我在这里找到了一个简单的解决方案http://codepen.io/AAnkudovich/pen/BWbaEp

单击按钮上的

调用该函数，将活动类添加到第一个元素，因为它将是起点

<div class="steps">
 <div class=" is-active step1">
  Step 1/3
</div>
<div class="step step2">
  Step 2/3
</div>
<div class="step step3">
 Step 3/3
</div>
</div>

<button type="submit" class="btn next-step" onclick="stepnext()">Next step</button>

这是进入你的js的功能

 function stepnext() {

  document.getElementsByClassName('is-active')[0].classList.add('step');
  var elem = document.getElementsByClassName('is-active');
  elem[0].nextSibling.nextSibling.classList.add('is-active');
  document.getElementsByClassName('is-active')[0].classList.remove('is-active');


}