我有一个 div,其中包含一个字段,当我单击“添加”按钮时,我想将其添加到页面。
// the div that contains the field
<div class="dependent-row" style="visibility: hidden;">
<div class="row" style="border:1px solid #ccc; padding: 5px; margin: 10px 0;">
<label>First Name</label>
<input type="text" value="" class="firstName dependentfield">
</div>
</div>
每次单击添加按钮时都会显示一组新字段。
我遇到的问题是它设置了所有添加的字段具有相同的名称。
var index = 0;
$("#add-dependent-btn").on('click', function(e) {
e.preventDefault();
index++;
$(this).after($('.dependent-row').html());
$('.firstName').attr('name', 'fields[dependents][new'+index+'][fields][firstName]');
});
我知道我需要将单击添加按钮时添加的字段归零,但不知道如何执行此操作。
如果我单击添加按钮两次,则呈现的 html 如下:
<input type="text" value="" class="firstName dependentfield" name="fields[dependents][new2][fields][firstName]">
<input type="text" value="" class="firstName dependentfield" name="fields[dependents][new2][fields][firstName]">
最佳答案
这基本上就是你的做法。
var rowObject = null;
function addRow(lineNumber) {
if (rowObject != null) {
var newRowObject = rowObject.clone();
var label = "Label " + lineNumber;
var inputName = 'fields[dependents][new' + lineNumber + '][fields][firstName]';
var myLabel = newRowObject.find('label');
myLabel.text(label);
var myInput = newRowObject.find('input.firstName.dependentfield');
myInput.val('');
myInput.attr('name', inputName);
$('div.dependent-row').append(newRowObject);
}
}
$(function() {
rowObject = $('div.dependent-row > div.row').clone();
$('#add-dependent-btn').click(function() {
var totalRow = $('div.dependent-row > div.row').length;
addRow(totalRow + 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-dependent-btn">
Add row
</button>
<div class="dependent-row">
<div class="row" style="border:1px solid #ccc; padding: 5px; margin: 10px 0;">
<label>First Name</label>
<input type="text" value="" class="firstName dependentfield">
</div>
</div>
关于javascript - 添加具有动态字段名称的新字段会将字段名称设置为相同的名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36040383/