这是我的html:
<div id="extraPerson">
<div class="controls controls-row">
<input class="span3" placeholder="First Name" type="text" name="firstname2">
<input class="span3" placeholder="Last Name" type="text" name="lastname2">
<select class="span2" name="gender2"><option value="Male">Male</option><option value="Female">Female</option></select>
...ETC
</div>
</div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>
这是我的 jquery:
<script>
$(document).ready(function(){
$('#addRow').click(function(){
$("#extraPerson").slideDown();
});
})
</script>
#extraPerson 隐藏在 css 中。
单击链接时它会添加 div。但是,我希望它在每次单击链接时继续添加相同的 div。我该怎么做呢?如果将数字附加到表单输入名称中就更好了。例如名字3、名字4等。
试试这个方法:-
Demo http://jsfiddle.net/nzYAW/
HTML
创建模板extraPersonTemplate
并用它来进一步构建。将容器添加到您的内容部分。
<div class="extraPersonTemplate">
<div class="controls controls-row">
<input class="span3" placeholder="First Name" type="text" name="firstname2">
<input class="span3" placeholder="Last Name" type="text" name="lastname2">
<select class="span2" name="gender2">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div id="container"></div>
JS
$(document).ready(function () {
$('<div/>', {
'class' : 'extraPerson', html: GetHtml()
}).appendTo('#container'); //Get the html from template
$('#addRow').click(function () {
$('<div/>', {
'class' : 'extraPerson', html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');//Get the html from template and hide and slideDown for transtion.
});
})
function GetHtml() //Get the template and update the input field names
{
var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=firstname]')[0].name="firstname" + len;
$html.find('[name=lastname]')[0].name="lastname" + len;
$html.find('[name=gender]')[0].name="gender" + len;
return $html.html();
}
小CSS
.extraPersonTemplate {
display:none;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)