javascript - 克隆多个输入 Javascript
问题描述
有人可以帮我看看这个 JavaScript 吗?我正在尝试克隆多个不同的输入。单击附加按钮时,我想独立克隆的付款输入/输出。众议院收费选择和输入我想克隆在一起。我能够获得标准输入来克隆我想要的方式,但也希望选择框与它一起克隆。此外,我似乎可以让附加的按钮正确排列。我的 JavaScript 很糟糕,所以我什至不确定我是否以正确的方式去做。任何帮助表示赞赏。
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls stuff:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-md-8 col-md-offset-2">
<legend>Payouts/Payins - Richfield</legend>
<!-- Pay Out input-->
<div class="form-group line">
<label class="col-md-3 control-label" for="pay_out">Payment Out</label>
<div class="col-md-4">
<div class="entry input-group">
<input id="pay_out" name="pay_out[]" class="form-control" placeholder="Total $" type="text">
<span class="input-group-btn"><
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
<!-- press + div -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<small>
Press
<span class="glyphicon glyphicon-plus gs"></span>
to add another form field :)
</small>
</div>
</div>
<br>
<!-- Pay In input-->
<div class="form-group line">
<label class="col-md-3 control-label" for="pay_in">Payment In</label>
<div class="col-md-4">
<div class="entry input-group">
<input id="pay_in" name="pay_in[]" class="form-control" placeholder="Total $" type="text">
<span class="input-group-btn"><
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
<!-- press + div -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<small>
Press
<span class="glyphicon glyphicon-plus gs"></span>
to add another form field :)
</small>
</div>
</div>
<br>
<legend>House Charges - Richfield</legend>
<!-- Dynamic House charges Divider-->
<div class="col-md-3 col-md-offset-2 colspace">
<div class="form-group">
<select class="form-control" id="account_selector" name="house_account[]">
<option>Select House Acct</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="col-md-3 colspace">
<div class="form-group">
<div class="controls">
<stuff>
<div class="entry input-group">
<input id="house_total" name="house_total[]" class="form-control" placeholder="Total $" type="text">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</stuff>
</div>
</div>
</div>
</div>
</div>
<div id="push"></div>
(引导层)
解决方案
我明白了,这是我的代码,如果它对其他人有帮助的话。
$(function(){
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var parentRow = $(this).closest('.charge-row'),
cloneRow = cloneChargeRow(parentRow);
$('.charge-row:last').after(cloneRow);
}).on('click', '.btn-remove', function(e) {
$(this).closest('.charge-row').remove();
e.preventDefault();
return false;
});
function cloneChargeRow(parentRow) {
// Clear existing add button
$('.charge-row').find('.btn-add').removeClass('btn-add btn-success').addClass('btn-remove btn-danger');
$('.charge-row').find('.btn').html('<span class="glyphicon glyphicon-minus"></span>')
var newRow = parentRow.clone();
newRow.find('.btn').addClass('btn-add btn-success').removeClass('btn-remove btn-danger');
newRow.find('.btn').html('<span class="glyphicon glyphicon-plus"></span>');
newRow.find('select :selected').removeAttr('selected');
newRow.find('input').val('');
return newRow;
}
});
这是html:
<div class="container">
<div class="col-md-10">
<legend>House Charges - Richfield</legend>
<div class="charge-row row">
<!-- Dynamic House charges Divider-->
<div class="col-md-3 col-md-offset-2 colspace">
<div class="form-group">
<select class="form-control" id="account_selector" name="house_account[]">
<option>Select House Acct</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="col-md-3 colspace">
<div class="form-group">
<div class="controls">
<div class="entry input-group">
<input id="house_total" name="house_total[]" class="form-control" placeholder="Total $" type="text">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 有没有办法使用 Webpack 而不是 main.bundle.css 和 main.bundle.js 生成单个 JS 文件?
- vtiger - 为多选下拉菜单设置限制
- java - 无法弄清楚为什么我的输出对于这个程序不正确
- c# - 使用 EventId 丰富 serilog 日志
- mysql - 如何使用 Springboot 数据 JPA 和 Mysql 进行批量插入/更新
- java - java.time 对 Spring Roo 的支持?
- javascript - Localstorage 会清除生产应用程序中的整个本地存储吗
- python - 如何在不到一秒的时间内从 bigquery 表中获取单个行?
- ocr - Google Cloud Vision API 是否检测 OCRed 文本中的格式,如粗体、斜体、字体名称(helvetica 或 times new roman)等?
- php - PHP如何获取动态标题数据?