每次迭代時(shí)，count 在檢查當(dāng)前框是否大于 3后計(jì)算您將當(dāng)前框添加到的年份。這意味著在大多數(shù)情況下，如果最后一個(gè)框大于 1，將創(chuàng)建一個(gè)附加框。
要更改此year值，請?jiān)跈z查是否count大于 3之前添加當(dāng)前值。
count += current.value;
if (count > 3) {
remove = true;
current.added = false;
document.querySelector(current.parent).parentNode.removeChild(document.querySelector(current.parent));
delete addresses[keys[i]];
}
例子：
let addresses = {
'#years_at_address_0': { /* The default one */
elm: document.querySelector('#years_at_address_0'),
value: 0,
parent: '#previousAddress',
added: false
}
};
function setupAddressChecking(watch)
{
if (addresses[watch] === undefined) {
addresses[watch] = {
elm: document.querySelector(watch),
value: 0,
parent: '#previousAddress' + (Object.keys(addresses).length > 0 ? Object.keys(addresses).length : ''),
added: false
};
}
let count = Object.keys(addresses).length;
addresses[watch].elm.addEventListener('change', function() {
if (this.value && addresses[watch].value !== this.value) {
addresses[watch].value = parseInt(this.value);
if (calculateYears() && !addresses[watch].added) {
document.querySelector('#yearsAdditional').appendChild(createNewAddress());
addresses[watch].added = true;
setupAddressChecking('#years_at_address_'+count);
}
}
});
}
function calculateYears()
{
let count = 0;
let remove = false;
const keys = Object.keys(addresses);
for(var i = 0; i < keys.length; i++) {
let current = addresses[keys[i]];
count += current.value;
if (count > 3) {
remove = true;
current.added = false;
document.querySelector(current.parent).parentNode.removeChild(document.querySelector(current.parent));
delete addresses[keys[i]];
}
}
if (count === 3) {
return false;
}
return !remove;
}
function createNewAddress()
{
let count = Object.keys(addresses).length;
return createHTML({
0: { elm: createElement('div', {'id': 'previousAddress' + count}), root: null },
1: { elm: createElement('div'), root: 0 },
2: { elm: createElement('div'), root: 1},
3: { elm: createElement('label', {'for': 'previous_address', 'text': 'Address'}), root: 2},
4: { elm: createElement('div'), root: 1},
5: { elm: createElement('textarea', {
'cols': 40,
'id': 'previous_address' + count,
'name': 'finprop_previous_address',
'placeholder': 'Previous Address',
'rows': 4
}), root: 4},
6: { elm: createElement('div'), root: 1},
7: { elm: createElement('div', { 'id': 'previous_row_postcode' + count}), root: 0 },
8: { elm: createElement('div'), root: 7 },
9: { elm: createElement('label', {'for': 'previous_postcode', 'text': 'Postcode *'}), root: 8 },
10: { elm: createElement('div'), root: 7 },
11: { elm: createElement('input', {
'id': 'previous_postcode' + count,
'name': 'previous_postcode',
'placeholder': 'Postcode',
'type': 'text',
'maxlength': 8
}), root: 10 },
12: { elm: createElement('div'), root: 7 },
13: { elm: createElement('div', {'id': 'row_months_years_at_address' + count}), root: 0 },
14: { elm: createElement('div'), root: 13 },
15: { elm: createElement('label', {'for': 'years_at_address_' + count, 'text': 'How long at address *'}), root: 14 },
16: { elm: createElement('div'), root: 13 },
17: { elm: createElement('div'), root: 16 },
18: { elm: createElement('input', {
'id': 'years_at_address_' + count,
'maxlength': 2,
'min': 0,
'name': 'finprop_years_at_address',
'placeholder': 'Years',
'size': 4,
'type': 'text',
'class': 'years_at_address'
}), root: 17 },
19: { elm: createElement('div'), root: 16 },
20: { elm: createElement('input', {
'id': 'months_at_address_' + count,
'maxlength': 2,
'min': 0,
'name': 'finprop_months_at_address',
'placeholder': 'Months',
'size': 4,
'type': 'text'
}), root: 19 },
21: { elm: createElement('div'), root: 13 }
})[0].elm;
}
function createHTML(elements)
{
let keys = Object.keys(elements);
for (var i = 0; i < keys.length; i++) {
if (elements[keys[i]].root === null || elements[keys[i]].root === i) {
continue;
}
elements[elements[keys[i]].root].elm.appendChild(elements[keys[i]].elm);
}
return elements;
}
function createElement(type, options)
{
let elm = document.createElement(type);
if (options) {
for(var i = 0; i < Object.keys(options).length; i++) {
let key = Object.keys(options)[i];
if (key === 'text') {
elm.innerHTML = options[key];
continue;
}
elm.setAttribute(key, options[key]);
}
}
return elm;
}
setupAddressChecking('#years_at_address_0');
fieldset > div {
padding: 10px;
margin: 5px;
background: whitesmoke;
border: 1px solid lightgray;
}
<fieldset>
<h3>Address Details * denotes a required field</h3>
<div>
<div id="previousAddress0">
<div>
<div><label for="previous_address0">Address</label></div>
<div><textarea cols="40" id="previous_address0" name="finprop_previous_address0" placeholder="Previous Address" rows="4"></textarea></div>
<div></div>
</div>
<div id="previous_row_postcode0">
<div><label for="previous_postcode0">Postcode *</label></div>
<div><input id="previous_postcode0" name="previous_postcode0" placeholder="Postcode" type="text" maxlength="8">
</div>
<div></div>
</div>
<div id="row_months_years_at_address0">
<div><label for="years_at_address_0">How long at address *</label></div>
<div>
<div><input id="years_at_address_0" maxlength="2" min="0" name="finprop_years_at_address0" placeholder="Years" size="4" type="text" class="years_at_address0"></div>
<div><input id="months_at_address_0" maxlength="2" min="0" name="finprop_months_at_address0" placeholder="Months" size="4" type="text"></div>
</div>
<div></div>
</div>
</div>
</div>
<div id="yearsAdditional"></div>
</fieldset>
