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>