如何使用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

如果您在click scope定义了total （作为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/