使用步骤/组创建窗体

Question

我有两个主要部分-- intro-info和current-info。我本质上希望他们做同样的事情，但在不同的时间表现出来。在页面加载上，intro-info容器首先显示，然后遍历并填充输入，然后单击“继续”。我无法理解的是如何显示current-info容器，但是在单击按钮后隐藏除第一个输入之外的所有输入。

我用intro-info隐藏第一个容器，方法是使用.hide()，然后用show()显示它。如下所示：

$('#intro-button').click(function(){
    $('#intro-info').hide(200);
    setTimeout(function(){
        $('#current-info').show(500);
    }, 300);
});

在shows中，我尝试过执行，$('.current)，$('.current:first-child)，但是当我这样做时什么都不会显示，理想情况下，我希望整个容器出现以供将来添加，但只需隐藏除第一个输入之外的所有输入。

这里有把小提琴给你看我的意思 ...同样，在您单击“继续”之后，一旦所有输入都被填充，您将看到该部分进入视图，并且有多个输入。有人看到我能做什么了吗？

Answer 1

正如我在评论中所说，我不会创建复制/粘贴-意大利面代码，

相反，我会坚持一个更好的逻辑：

删除那些无用的ID和额外的类。使用如下逻辑: 1.父元素有一个继续按钮，单击“显示下一个父元素”。2.每个输入都显示在同一个父类中的下一个输入。

​

jQuery(function( $ ) { // DOM is now ready

  // Group your logic by parents!
  $(".labelsGroup").each(function() {

    var $thatGroup = $(this);
    var $nextGroup = $thatGroup.next(".labelsGroup");
    var $inputs    = $thatGroup.find("input");
    var $proceed   = $thatGroup.find("button");

    $inputs.on("input", function(){
      var $nextLabel = $(this).closest("label").next("label");
      if($.trim(this.value).length > 3) {
        $nextLabel.has(":input").addClass("show");
      }
    });

    $proceed.on("click", function(e){
      e.preventDefault(); // Don't submit <form> (if any is used)
      
      var allValid = $inputs.filter(function() { 
        return $.trim(this.value).length > 3;
      }).length === $inputs.length;
      // TODO: use a better validation plugin than the above

      if(allValid) { // Finally proceed!!
        $thatGroup.addClass("hide");
        $nextGroup.addClass("show");
        // TODO: Submit form using AJAX to a service
      } else {       // or Log error!!
        return alert("Please fill-in the missing fields!");
      }

    });

  });
});

.labelsGroup {
  text-align: center;
}
.labelsGroup label {
  display: block;
  margin: 20px 0;
}
.labelsGroup label input {
  background: #fff;
  padding: 10px 15px;
  border: 1px solid #999;
}
/* hide all but first label in parent */
/* hide all subsequent labelsParents */
.labelsGroup label + label,
.labelsGroup + .labelsGroup,
.hide {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.show {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  -webkit-transition: opacity 0.7s ease-in;
  transition: opacity 0.7s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="labelsGroup">
  <label>
    What is your name?<br>
    <input name="name" type="text"><!-- PS: use name="" instead of id=""-->
  </label>
  <label>
    What is your email address?<br>
    <input name="email" type="email">
  </label>
  <label>
    <button>Proceed</button>
  </label>
</div>

<div class="labelsGroup">
  <label>
    Do you have<br>
    <input name="have" type="text">
  </label>
  <label>
    What is your current<br>
    <input name="what_is_your" type="text">
  </label>
  <label>
    <button>Proceed</button>
  </label>
</div>

​

Answer 2

您需要使用类intro针对每个元素，并在DOM中包含该元素的第一次出现(使用:first )。

$('#intro-button').click(function(){
    $('#intro-info').hide(); // hide intro-info div
  $("#current-info").show(); // show current-info
  $('.current').hide(); // hide all elements with class current
    setTimeout(function(){
        $('.current:first').show(200); // display once the 1st occuring element 
    }, 300);
});

示例：https://jsfiddle.net/2o8Lxuo3/3/