图像点击计数器是越野车

当我运行下面的代码，每次点击它显示一次又一次计数。我怎样才能优化它？图像点击计数器是越野车

var i = 1; 
var txt1; 

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

来源

2017-01-23 Sai Charan

而随后追加尝试使用HTML。不要与身体一起使用它与任何股利。如

和js $（“。counter”）。html（txt1）; – Abbas

使用固定p标签体内和更新每次点击的文本内容。

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

<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>

来源

2017-01-23 07:35:31

这个id对象应该是为了图像对吗？因为当我们点击图片时，计数器应该开始。那为什么按钮？ –

@SaiCharan：它可以是任何HTML元素 –

我会建议@ Pranav的做法。但是，您还可以通过在点击处理程序外创建p对象来获得期望的结果。在事件处理程序中设置.text()，然后设置.append()。

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

<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"/>

来源

2017-01-23 07:37:39 Satpal

我可以知道为什么id目标无法赋予img标签吗？ –

@SaiCharan，是的，你可以看到更新的代码片段。您可以将ID设置为任何元素。使用某个插件或动态创建图像吗？你能分享这个html吗？ – Satpal

图像点击计数器是越野车

回答

相关问题