2013-04-25 97 views
0

这应该是一个非常简单的问题。我只是想在这里输入变量“inputNumber”到附加的html代码片段中。 inputNumber应该在每次附加这个html时增加。在html中增加javascript变量

所以基本上我想输入名称,ID和div id从5每增加一次“addMore”单击。

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>"); 
}); 
+3

分析语法突出显示更密切...看到了吗? – elclanrs 2013-04-25 00:15:51

回答

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++一次来改变了这种行为。


您可能还需要考虑使用这种语法来创建与属性的元素改进代码的可读性 -

​​
+4

''+ inputNumber +“'应该放在'id ='name''引号内。 – 2013-04-25 00:17:13

+1

和所有其他属性引号。 – Barmar 2013-04-25 00:17:55

+0

谢谢你的:) – Lix 2013-04-25 00:19:58

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> 

另外,还要确保你的文本字符串是否正确连接在一起。