在HTML中遞增javascript變量

Question

這應該是一個非常簡單的問題。 我只是想在此處將變量“ inputNumber”輸入到附加的html代碼段中。 每次附加此html時，inputNumber應該增加。

所以基本上我希望每次單擊“ addMore”時輸入名稱，ID和div ID從5開始遞增。

var inputNumber = 5;

$("#addMore").click(function() {
$("#input-names").append("<input type='text' id='name' + inputNumber++ name='name' + inputNumber++> <div class='delete-line' id='delete-' + inputNumber++><a href='JavaScript:void(0);'>X</a></div><br>");
});

Answer 1

您只是沒有在插入變量之前終止字符串。

var inputNumber = 5;

$("#addMore").click(function() {
  inputNumber++;
  $("#input-names").append("<input type='text' id='name"+ inputNumber +"' name='name"+ inputNumber +"' > <div class='delete-line' id='delete-"+ inputNumber +"'><a href='JavaScript:void(0);'>X</a></div><br>");
});

您可以通過語法突出顯示代碼中的差異。 您的IDE也應該具有此功能。

您試圖多次使用增量運算符（++）。 這也是一個問題，因為每次調用inputNumber++該值都會增加。 這意味着在您的代碼中（固定了引號），您仍然將值增加了3，因為您調用了inputNumber++ 3次。 我通過在click回調開始時僅調用一次inputNumber++更改了此行為。

---

您可能還想考慮通過使用以下語法創建具有屬性的元素來提高代碼的可讀性-

var inputElem = $('<input />', {
    type: 'text',
    id: 'name'+inputNumber,
    name: 'name'+inputNumber
});

Answer 2

在附加操作外部調用一次inputNumber++ ，否則每次在要附加的長字符串中聲明該值時，您都將遞增。 增量運算符是自賦值的，這意味着它們將遞增1並賦給一次全部遞增的值。 等效於inputNumber = inputNumber + 1的代碼inputNumber = inputNumber + 1

$("#addMore").click(function() {
    inputNumber++;
    $("#input-names").append("<input type='text' id='name" + inputNumber + "' name='name" + inputNumber + "'> <div class='delete-line' id='delete-" + inputNumber + "'><a href='JavaScript:void(0);'>X</a></div><br>");
});

用另一種方式，第一次單擊的結果HTML將是：

<input type='text' id='name6' name='name7' />
<div class='delete-line' id='delete8'>
    <a href='javascript:void(0);'>X</a>
</div>

另外，請確保正確連接文本字符串。