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);
});

在show line中，我尝试过，$('.current)，$('.current:first-child)，但是当我这样做时没有任何显示，理想情况下我希望整个容器出现以供将来添加，但只是隐藏所有输入不是第一个。

Here is a fiddle to show you what I mean ...再次，在您点击继续之后，一旦填写了所有输入，您将看到部分部分进入视图并且有多个输入。有谁看到我能做什么？

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/

创建包含步骤/组的表单的问题

2 个答案: