0

这应该是一个非常简单的问题。我只是想在此处将变量“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>");
});
4

2 回答 2

4

您只是在插入变量之前没有终止字符串。

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 次。inputNumber++我通过在单击回调开始时仅调用一次来更改此行为。

您可能还想考虑通过使用此语法创建具有属性的元素来提高代码的可读性 -

var inputElem = $('<input />', {
    type: 'text',
    id: 'name'+inputNumber,
    name: 'name'+inputNumber
});
于 2013-04-25T00:16:43.700 回答
1

在追加之外调用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>

此外，请确保您的文本字符串正确连接。

于 2013-04-25T00:18:27.717 回答