Jquery通过写入一个值创建多个输入字段,但一次显示一组输入字段
问题描述:
我正在创建“配置程序”。Jquery通过写入一个值创建多个输入字段,但一次显示一组输入字段
用户将输入他们想要的配置数量,每个配置中将包含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个输入字段但正如我如上所述,我想用户首先进入的所希望的数配置会一次显示一个设置。
答
你想把所有的东西包装在一个函数中,并且在你想要的函数内部(为了理智和结果检查)确保每个元素都是唯一的。假设你知道如何做到这一点,只需要一些关于把它变成循环的逻辑的帮助,这里是你的代码修改,让你开始。滚动到底部并点击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. [email protected]' /><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. [email protected]"/>
<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>
太感谢您了!现在我只需要弄清楚另一部分。 Merp – JCD
请务必标记接受的答案,以确保该帖子的未来观看者看到此问题已得到解决。 – Jesse