如何解决jQuery 多表单转发器
我正在使用表单转发器，但我的目标是让多个转发器在我的项目中使用它。我试图在不同的论坛上搜索，但没有得到积极的结果。我当前的代码只对第一个 div 重复，即 targetDiv 一个，第二个 div 不重复
我想重复所有的 div targetDiv
jsfiddle https://jsfiddle.net/infohassan/qbontgj6/2/
这是我的 HTML
<div class="row targetDiv" id="div0">
<div class="col-md-12">
<div id="myRepeatingFields" class="fvrduplicate">
<div class="row entry">
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- Field Ends -->
</div>
</div>
</div>
</div>
<div class="row targetDiv" id="div1">
<div class="col-md-12">
<div id="myRepeatingFields" class="fvrduplicate">
<div class="row entry">
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- Field Ends -->
</div>
</div>
</div>
</div>
这是我的 JS
$(function() {
$(document).on('click','.btn-add',function(e) {
e.preventDefault();
var controlForm = $('.fvrduplicate: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('<i class="fa fa-minus" aria-hidden="true"></i>');
}).on('click','.btn-remove',function(e) {
e.preventDefault();
$(this).parents('.entry:first').remove();
return false;
});
});
解决方法
我稍微调整了你的代码，也许这就是你想要的？
- 我使您的
id-div 中的.fvrduplicate属性独一无二（“group1”和“group2”） -
controlForm现在不是取自第一个.frvduplicatediv，而是取自.closest()到点击的按钮 - 其余部分基本保持不变，但是，我为按钮添加了“+”和“-”（因为在此代码段中当前未定义 css 类
fa-minus和fa-plus）并分开带有<hr>元素的两种形式。
$(function() {
$(document).on('click','.btn-add',function(e) {
e.preventDefault();
var controlForm = $(this).closest('.fvrduplicate'),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('<i class="fa fa-minus" aria-hidden="true">-</i>');
}).on('click','.btn-remove',function(e) {
$(this).closest('.entry').remove();
return false;
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row targetDiv" id="div0">
<div class="col-md-12">
<div id="group1" class="fvrduplicate">
<div class="row entry">
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true">+</i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr> <!-- second form starts below: -->
<div class="row targetDiv" id="div1">
<div class="col-md-12">
<div id="group2" class="fvrduplicate">
<div class="row entry">
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true">+</i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
