我正在嘗試在按鈕上添加輸入字段，單擊我應該工作的所有內容，但需要做3件事：我需要這樣的值來輸出2{{ $formData['member_2'] }}對于數字1，我正在將此添加到下面的值中：value="{{ $formData['member_'.'+ i +'] }}"但我的輸出沒有返回member_+ i +member_2然后我需要設置一個限制，只能創建7個輸入字段。最后，當我刪除一行時，我需要它來刪除計數。這是我的完整代碼。為了便于閱讀，我刪除了樣式。網頁：<button type="button" name="add" id="add">Add Other Members</button><div id="dynamic_field"></div>JS：$(document).ready(function() { var i=1; $('#add').click(function() { i++; $('#dynamic_field').append('<div id="row'+i+'"><label" for="member_'+ i +'">Member '+ i +'</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="'+ i +'">X</button></div>') }); $(document).on('click', '.btn_remove', function() { var button_id = $(this).attr("id"); $('#row' + button_id + '').remove(); });});運行代碼段以查看問題 2 和 3。（請注意，刪除輸入時，計數不會重新啟動。它從它離開的地方繼續。$(document).ready(function() { var i=1; $('#add').click(function() { i++; $('#dynamic_field').append('<div id="row'+i+'"><label" for="member_'+ i +'">Member '+ i +'</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="'+ i +'">X</button></div>') }); $(document).on('click', '.btn_remove', function() { var button_id = $(this).attr("id"); $('#row' + button_id + '').remove(); });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" name="add" id="add">Add Other Members</button><div id="dynamic_field"></div>
2 回答
月關寶盒
TA貢獻1772條經驗 獲得超5個贊
問題 2 和 3 非常簡單。您只需要在刪除成員時遞減變量。另外，當.ii>=7
$(document).ready(function() {
var i = 1;
$('#add').click(function() {
if (i <= 7) {
$('#dynamic_field').append('<div id="row' + i + '"><label" for="member_' + i + '">Member ' + i + '</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="' + i + '">X</button></div>')
i++;
}
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
i--;
$('#row' + button_id + '').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" name="add" id="add">Add Other Members</button>
<div id="dynamic_field"></div>
使用此方法時會遇到的問題是，刪除列表中間的元素會弄亂順序。您最終會得到重復的元素。
您可以通過僅允許刪除最后一個元素來解決此問題。
$(document).ready(function() {
var i = 1;
$('#add').click(function() {
if (i <= 7) {
$('#dynamic_field').append('<div id="row' + i + '"><label" for="member_' + i + '">Member ' + i + '</label><input type="text" name="member_' + 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');
}
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add">Add Other Members</button>
<div id="dynamic_field"></div>
<button type="button" class="btn_remove hidden">Remove last</button>
關于第一個問題，我猜雙花括號是服務器端模板的東西（就像Laravel的Blade一樣）。在這種情況下，它是在將頁面發送到客戶端之前在服務器端生成的。這意味著，在JS有機會被執行之前。您的服務器端代碼不知道 。i
如果您使用 PHP 在服務器中生成元素，則不能使用 ，因為服務器端不知道該變量。但是，你不應該需要它。i
如果您使用JS動態生成元素，則不能在其中使用PHP模板。為時已晚，代碼已在客戶端中執行。您可以做的是使用PHP創建一個JS對象，其中包含創建元素所需的所有信息。像這樣：
echo "<script>var myJsData=" . json_encode($myPHPdata) . ";</script>";
然后，您可以使用它通過JS在客戶端中動態生成元素。
ibeautiful
TA貢獻1993條經驗 獲得超6個贊
好的，你需要做3件事：
獲取創建的輸入，以便對下一個索引進行計數和獲取下一個索引
插入次數
獲取上次創建的用于重置計數器的輸入，但避免重復的 ID 和名稱
$(document).ready(function() {
var i=0;
$('#add').click(function() {
// Get inputs created (if any)
var inputs = $('input');
// Verify if there are 7 or more inputs
if(inputs.length >= 7) {
console.log('Only seven inputs allowed');
return;
}
// Get last input to avoid duplicated IDs / names
if(inputs.last().length > 0) {
// Split name to get only last part of name, the numeric one
i = parseInt(inputs.last()[0].name.split('_')[1]);
}
i++;
$('#dynamic_field').append('<div id="row'+i+'"><label" for="member_'+ i +'">Member '+ i +'</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="'+ i +'">X</button></div>')
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" name="add" id="add">Add Other Members</button>
<div id="dynamic_field"></div>
- 2 回答
- 0 關注
- 113 瀏覽
添加回答
舉報
0/150
提交
取消