我發現這個片段可以向表單添加額外的欄位。效果很好。如果可以，請告訴我如何讓添加的欄位從 2 開始，同時保持洗掉它的選項。雖然 i = 2 確實有效，但我還沒有弄清楚相應地添加/洗掉所述欄位的選項需要什么。感謝您的時間。
$(document).ready(function() {
var i = 1;
$('#add').click(function() {
if (i <= 7) {
$('#dynamic_field').append('<div id="row' i '"><label" for="number_' i '">Number ' i '</label><input type="text" name="number_' i '" value=""></div>')
i ;
$('.btn-remove').removeClass('hidden');
}
});
$(document).on('click', '.btn-remove', function() {
var button_id = $(this).attr("id");
i--;
$('#row' $('#dynamic_field div').length).remove();
if (i<=1) {
$('.btn-remove').addClass('hidden');
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add" class="btn-add">Add Another Number</button> <button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field"></div>uj5u.com熱心網友回復：
id使用您在運行時生成的屬性會使您的代碼變得不必要地復雜。
您可以通過在每一行中使用相同的內容來完全避免這樣做，您可以將這些內容存盤在一個template元素中。請注意，此模板內容使用 no id，但相同class，并且label包裝了input所以 nofor屬性是必需的。
然后，您可以簡單地獲取 DOM 中現有行的數量來計算下一個要顯示的數字。此外，由于“洗掉”按鈕僅針對最后一行，您可以使用 直接選擇它.row:last。
這是一個實施了所有這些更改的作業示例：
jQuery($ => {
let maxRows = 7;
let rowTemplate = $('#row-template').html();
let $container = $('#dynamic_field');
$('#add').on('click', () => {
let rowCount = $('.row').length;
if (rowCount >= maxRows)
return;
let $row = $(rowTemplate).appendTo($container);
$row.find('span').text(rowCount = 2);
$('.btn-remove').removeClass('hidden');
});
$(document).on('click', '.btn-remove', () => $('.row:last').remove());
});.hidden {
display: none;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add" class="btn-add">Add Another Number</button>
<button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field"></div>
<template id="row-template">
<div class="row">
<label>
Number <span></span>
<input type="text" name="number[]" value="" />
</label>
</div>
</template>uj5u.com熱心網友回復：
你不需要自己記數
$(function() {
const $container = $("#dynamic_field");
let count = $container.children().length;
$('.btn-remove').toggle(count > 1);
$('#add').click(function() {
let count = $container.children().length;
if (count < 7) {
$('#dynamic_field').append(`<div id="row$(count)"><label" for="number_${count}">Number ${count 1}</label><input type="text" name="number_${count}" value=""></div>`);
count ;
}
$('.btn-remove').toggle(count > 0);
});
$(document).on('click', '.btn-remove', function() {
const $children = $container.children();
$children.last().remove();
let count = $children.length;
console.log(count)
$(this).toggle(count > 1);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add" class="btn-add">Add Another Number</button> <button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field"></div>你也可以克隆一個現有的行
$(function() {
const $container = $("#dynamic_field");
const getCount = () => $container.find(".add-row").length;
$('.btn-remove').toggle(getCount() > 1);
$('#add').click(function() {
let count = getCount();
if (count < 7) {
const $cloneDiv = $container.children().first().clone().appendTo($container);
$cloneDiv.find("input").val("").attr("name",`number${count 1}`);
$cloneDiv.find("label").text(`Number ${count 1}`);
}
$('.btn-remove').toggle(count > 0);
});
$(document).on('click', '.btn-remove', function() {
$container.find(".add-row").last().remove();
let count = getCount()
console.log(count)
$(this).toggle(count > 1);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add" class="btn-add">Add Another Number</button> <button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field">
<div class="add-row" id="1">
<label for="number_1">Number 1</label><input type="text " name="number_1 " value="" />
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/506960.html
標籤：javascript jQuery 循环 变量 增量