ステップ/グループを含むフォームの作成に関する問題

Question

私は2つのメインセクションintro-infoとcurrent-infoを持っています。私は本質的に同じことをすることを望んでいますが、異なる時に見せています。ページの読み込みでは、最初にintro-infoコンテナが表示され、入力を完了してから続行をクリックします。私が理解できないことは、current-infoコンテナを表示する方法ですが、ボタンをクリックした後の最初の入力以外のすべての入力を非表示にします。

.hide()を使用して最初のコンテナintro-infoを隠してからshow()と表示しています。このように：ショーラインで

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

、私は、$('.current)、$('.current:first-child)をやって試してみましたが、私はそれを行うと、理想的に私は、全体のコンテナは将来の追加のために表示したいときは何も現れませんが、単純にすべての入力が非表示します最初のもの以外。

Here is a fiddle to show you what I mean ...もう一度やり直すと、すべての入力が完了すると、セクションセクションが表示され、複数の入力が表示されます。誰も私ができることを見ている？

Answer 1

コメント、私はコピー/ペースト - スパゲッティコードを作成していません。
代わりに、私はより良いロジックに固執します。

これらの無駄なIDと余分なクラスを削除します。次のようなロジックを使用します。1. 1つの親に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

$('#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); 
}); 

例では、その要素の（:firstを使用して）第一の発生が含まれています。私は私の中で述べてきたようにhttps://jsfiddle.net/2o8Lxuo3/3/