2013-04-25 87 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> 

另外,還要確保你的文本字符串是否正確連接在一起。