我正在开发一个收集网站地址的php,booststrap脚本。默认情况下,只有一个字段可以收集链接到my sql中address1的网站名称。我在mysql中添加了另外两个值,名为address2,address3。
我想在address1字段下添加一个Add more按钮,这样用户就可以点击它们并添加另一个网站。这是我正在使用的代码:
<div class="span12">
<form class="form-horizontal" id="registerHere" method='post' action=''>
<fieldset>
<div class="control-group">
<label class="control-label" for="input01">Website Address 1</label>
<div class="controls">
<input type="text" class="input-xlarge" id="address1" name="address1">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Website Address 2</label>
<div class="controls">
<input type="text" class="input-xlarge" id="address2" name="address2">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Website Address 3</label>
<div class="controls">
<input type="text" class="input-xlarge" id="address3" name="address3">
</div>
</div>
</div>
正如您在上面的代码中看到的,我想隐藏网站地址2和隐藏的网站地址3字段,但在点击时显示我想要放在网站地址1下的更多按钮。我很着急所以请指导我。请不要忘记仅限制另外两个字段,我不希望有人一次又一次地点击,从而产生大量新字段。
由于
答案 0 :(得分:4)
您可以显示下一个地址字段,如下所示:#/ p>
var $group = $('.control-group');
$group.hide().first().show();
$group.on('focus', 'input', function(e) {
$(this).closest('.control-group').next('.control-group').slideDown();
});
这是使用“添加更多”按钮的版本:http://jsfiddle.net/KfQbb/4/
var $group = $('.control-group');
$group.hide().first().show();
$group.on('click', '.more', function(e) {
var $next = $(this).closest('.control-group').next('.control-group').slideDown();
$(e.currentTarget).hide();
if ($next.find('.more').hasClass('last')) {
$next.find('.more').hide();
}
});