如何添加與jQuery追加元素，並將文本值增加

Question

這裏是我的代碼：

$("#btn").click(function() { 
    var total = 1; 
    if (total<10) { 
     total = total + 1; 
     text = '<p>text '+ total +'</p>'; 
     $("#box").append(text); 
    } 
}); 

查看：

<button id="btn">button</button> 

<div id="box"></div> 

結果：

<p>text 2</p> 
<p>text 2</p> 

如何使價值每增加點擊按鈕？

像這樣：

<p>text 1</p> 
<p>text 2</p> 
<p>text 3</p> 

Answer 1

如果定義total出的click scope（如global），你會成功，你已經嘗試過的東西。

var total = 1; 

$("#btn").click(function() { 

    if (total<10) { 
     total = total + 1; 
     text = '<p>text '+ total +'</p>'; 

     $("#box").append(text); 
    } 
}); 

Answer 2

優化代碼：

var total = 0; 
$("#btn").click(function() { 
    if (total<10) { 
     $("#box").append('<p>text '+ total++ +'</p>'); 
    } 
}); 

演示：https://jsfiddle.net/qe0h459d/