首先，我不是任何型別的程式員，所以我需要你解決我的問題。
我有一個聯系表格，里面有一個地方，我可以添加更多輸入欄位，最多 10 個。我添加的每個欄位在代碼中都有一個我稱為“pers”的類，我希望這個類 pers 有一個它附近的增量數，如 pers1、2、3 等等。
獲得增量值很容易，但問題是“pers”類不會更新變數，保持檔案加載的第一個數字。
這是代碼
<script type="text/javascript">
window.s = 1;
</script>
<script type="text/javascript">
$(document).ready(function() {
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var maxField = 10;
var fieldHTML = '<div style="margin-top:5px;"><input type="text3" name="pers' window.s '" placeholder="Nome e Cognome"/><input type="time" style=margin-left:3.5px; autocomplete="off"><input type="time" style=margin-left:3.5px; autocomplete="off"><a href="javascript:void(0);" title="Rimuovi"><img src="IMG/less_icon.png"></a></div>';
$(addButton).click(function() {
if (window.s < maxField) {
window.s ; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
s--; //Decrement field counter
});
});
</script>
有一個全域變數“window.s”，因為這是我最后一次嘗試更新 var。
這些欄位正確地添加到 10，但“window.s”或只有“s”時仍保持他的第一個值 1，因此“pers”始終為“pers1”。我認為公開一個全域變數可以解決問題，但沒有。
我究竟做錯了什么？
非常感謝你們的幫助。
uj5u.com熱心網友回復：
您的代碼存在問題，因為您只fieldHTML在頁面加載時設定了一次。此時window.s是1，所以這是每次參考時使用的值fieldHTML。對此的快速解決方法是將fieldHTML定義放在click()事件處理程式中。
然而，更好的方法是完全消除對增量變數的需求。name在您動態生成的所有欄位上使用相同的。這樣您就不需要維護計數（例如，如果添加了 5 個并且有人洗掉了第 3 個，那么您目前將得到 2 個per5元素）。正因為如此，它也簡化了 JS 邏輯。此外，您應該將要克隆的 HTML 放在一個<template>元素中，而不是 JS 中，這樣就不會交叉污染代碼庫。
這是我提到的更改的一個作業示例：
jQuery($ => {
var $addButton = $('.add_button');
var $wrapper = $('.field_wrapper');
var maxFields = 10;
var fieldHTML = $('#field_template').html();
$addButton.click(() => {
if ($('.field_wrapper > div').length < maxFields) {
$wrapper.append(fieldHTML);
}
});
$wrapper.on('click', '.remove_button', e => {
e.preventDefault();
$(e.target).closest('div').remove();
});
});.field_wrapper>div {
margin-top: 5px;
}
.field_wrapper input.time {
margin-left: 3.5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button class="add_button">Add</button>
<div class="field_wrapper"></div>
<template id="field_template">
<div>
<input type="text3" name="pers[]" placeholder="Nome e Cognome" />
<input type="time" name="time1[]" class="time" autocomplete="off" />
<input type="time" name="time2[]" class="time" autocomplete="off" />
<a href="#" class="remove_button" title="Rimuovi">
<img src="IMG/less_icon.png">
</a>
</div>
</template>然后，您可以在 PHP 代碼中將所有input值作為陣列接收，如下所示。
uj5u.com熱心網友回復：
這是因為您沒有在那里使用更新的值。
首先，您為 分配一個值window.s，然后創建一個使用window.s初始狀態的值的變數，并且在每次添加時，它只是附加相同的fieldHtml。所以，你得到了相同的價值。
這是答案，您正在尋找：
<div><button class="add_button">click me</button></div>
<div class="field_wrapper"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
window.s = 1;
</script>
<script type="text/javascript">
$(document).ready(function() {
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var maxField = 10;
$(addButton).click(function() {
if (window.s < maxField) {
window.s ; //Increment field counter
let fieldHTML = generateLine(window.s);
$(wrapper).append(fieldHTML); //Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
s--; //Decrement field counter
});
});
function generateLine(lineNumber){
return '<div style="margin-top:5px;"><input type="text3" name="pers' lineNumber '" placeholder="Nome e Cognome"/><input type="time" style=margin-left:3.5px; autocomplete="off"><input type="time" style=margin-left:3.5px; autocomplete="off"><a href="javascript:void(0);" title="Rimuovi"><img src="IMG/less_icon.png"></a></div>';
}
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496579.html
標籤：javascript html jQuery 形式 变量