Question

当我运行以下代码时，每次点击都会一次又一次地显示计数。我该如何优化呢？

var i = 1;
var txt1;

$("#target").click(function(e) {
    console.log(i);
    i++;
    txt1 = $("<p></p>").text("count=" + i);
    $("body").append(txt1);
});

Answer 1

在正文中使用固定的p标记，并在每次点击时更新其文字内容。

＆＃13;

var i = 0;
$("#target").click(function(e) {
  $("#p").text("count = " + ++i);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="target" alt="Click" src="">
<p id="p"></p>

＆＃13;

Answer 2

我会推荐@Pranav的方法。但是，您也可以通过在单击处理程序外创建p对象来获得所需的结果。在事件处理程序中设置.text()，然后设置.append()。

＆＃13;

var i = 0;
var txt1 = $("<p></p>");
$("#target").click(function(e) {
  $("body").append(txt1.text("count=" + ++i));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='target' src="https://www.gravatar.com/avatar/742006974644e0e1d9a5a3bbde15947e?s=32&d=identicon&r=PG&f=1"/>

＆＃13;

制作了图像点击计数器，这是一个错误的

2 个答案: