圖像點擊計數器是越野車

當我運行下面的代碼，每次點擊它顯示一次又一次計數。我怎樣才能優化它？圖像點擊計數器是越野車

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

圖像點擊計數器是越野車

回答

相關問題