Jquery通過寫入一個值創建多個輸入字段，但一次顯示一組輸入字段

Question

我正在創建「配置程序」。

用戶將輸入他們想要的配置數量，每個配置中將包含3個輸入字段。

如果用戶想要5個配置並點擊創建。 「配置程序」將創建5組不同的輸入字段，每個輸入字段有3個輸入字段。

但是，我想每次顯示一個配置。

用戶後進入他們所希望的配置的數目。它應該顯示第一組，然後詢問他們是否想要進入下一個等等。

請參閱我當前的代碼： http://jsfiddle.net/jdarville/wsyzd1bu/

<div class='row' id="inputcontainer"> 
    <div class="form-group clearfix t" > 
     <div class="col-md-2 col-md-offset-2"> 
      <div class="form-text-field first-name"> 
       <label>First name</label> 
       <input type="text" id="firstName10" class="signup-input" name="" placeholder=""> 
      </div> 
     </div> 
     <div class="col-md-2"> 
      <div class="form-text-field last-name"> 
       <label>Last name</label> 
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional"> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="form-text-field email"> 
       <div> 
       <label>Email</label> 
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]" placeholder=""/> 
       <span class="common-sprite disNone sign-up-cross first"></span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<button type="button" id="more" name="more">Create More</button> 
<script> 
$("#more").click(".add",function(){ 



$("#inputcontainer").append("<br />"); 
$("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />"); 
$("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />"); 
$("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]'  placeholder='' /><br />"); 
})</button> 



</script> 

當前的代碼僅一個按鈕點擊創建3個輸入字段但正如我如上所述，我想用戶首先進入的所希望的數配置會一次顯示一個設置。

Answer 1

你想把所有的東西包裝在一個函數中，並且在你想要的函數內部（爲了理智和結果檢查）確保每個元素都是唯一的。假設你知道如何做到這一點，只需要一些關於把它變成循環的邏輯的幫助，這裏是你的代碼修改，讓你開始。滾動到底部並點擊Run code snippet。玩的開心！

function createMore(){ 
 
    var num = $('#num').val(); 
 
    for(var i = 0; i < num; i++) { 
 
     $("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />"); 
 
     $("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />"); 
 
     $("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]' placeholder='e.g. example@url.com' /><br />"); 
 
    } 
 
} 
 
$("#more").click(".add",createMore);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='row' id="inputcontainer"> 
 
     <div class="form-group clearfix t" > 
 
      <div class="col-md-2 col-md-offset-2"> 
 
       <div class="form-text-field first-name"> 
 
        <label>First name</label> 
 
        <input type="text" id="firstName10" class="signup-input" name="" placeholder=""> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-2"> 
 
       <div class="form-text-field last-name"> 
 
        <label>Last name</label> 
 
        <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional"> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <div class="form-text-field email"> 
 
        <div> 
 
        <label>Email</label> 
 
        <input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]" placeholder="e.g. example@url.com"/> 
 
        <span class="common-sprite disNone sign-up-cross first"></span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
<hr> 
 
# <input type="text" id="num" name="more" value='2'><br> 
 
<button type="button" id="more" name="more">Create More</button>