jQuery多格式中继器

Question

我正在使用一个表单中继器，但我的目标是让多个中继器在我的项目中使用它。我试着在不同的论坛上搜索，但没有得到积极的结果。我当前的代码只对第一个div重复，即targetDiv，对第二个div 不重复

我想重复所有的divstargetDiv

jsFiddlehttps://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>&nbsp;</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>&nbsp;</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;
});
});

Answer 1

我稍微调整了一下你的代码，也许这就是你想要的？

• 我使.fvrduplicate-div中的id属性是唯一的("group1"one_answers"group2"(
• controlForm现在不是取自第一个.frvduplicatediv，而是取自单击按钮的.closest()div
• 其余的基本上没有变化，然而，我添加了"+"以及"-"对于按钮(因为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>&nbsp;</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>&nbsp;</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>