javascript - 仅在此形式中使用 javascript

Question

我有一个表单，只有在您在字段中输入内容后才会显示下一个问题。我现在的麻烦是，如何仅使用 javascript 显示下一个问题。我现在正在考虑的是让每个问题中的 div 隐藏它，然后如果用户输入了一个值并单击“下一步”，则下一个问题将不会被隐藏。我的问题是有另一种方法可以仅使用 Javascript 来做到这一点。

下面的 HTML 代码...将有 20 <div>这个表单中的s刚刚发布2，因为代码是相同的，只是标签不同

  <div id="q1">
        <label for="nanme">Full Name</label>
        <input class="input" id="name" name="name" type="text" placeholder="Full Name" value="" onkeyup="disable()">

        <div class="control-group">
          <div class="controls">
            <button id="nxtbtn" name="nxtbtn" disabled onclick="next()">Next</button>
          </div>
        </div>
  </div>

  <div id="q2" style="display:none;">
      <label for="Age">Age</label>
      <input class="input" id="age" name="age" type="text" placeholder="Age" value="">

        <div class="control-group">
          <div class="controls">
            <button id="btnbck" >Back</button>
          </div>
        </div>      
        <div class="control-group">
          <div class="controls">
            <button id="button" >Next</button>
          </div>
        </div>      
  </div>

JS

function disable(){
  document.getElementById('nxtbtn').removeAttribute("disabled");
}
function next(){
    document.getElementById('q2').style.display = 'block';
    document.getElementById('q1').style.display = 'none';
}

这个site将帮助您了解我想如何处理我的表单

Answer 1

隐藏除第一个问题之外的所有问题:

// CSS
.question + .question {
  display: none;
}

当用户点击下一步时，隐藏第一个问题，显示下一个问题:

// JS
var step = 1;
$('button').click(function() {
  $('#q' + step++).hide();
  $('#q' + step).show();
});

codepen