在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>

另外，请确保正确连接文本字符串。