Wie verfolgen Sie Klickereignisse einzelner dom-Elemente mit jQuery und aktualisieren ihren Klickzähler entsprechend?

Question

Ich versuche, die Anzahl der Klicks auf 2 Bilder mit der gleichen Methode zu verfolgen. Unten ist der Code, den ich geschrieben habe, die gleichgeschlechtlichen

$(document).ready(function() { 
    var $foo= $('#foo'), 
    $bar= $('#bar'), 
    fooCount1 = 0, 
    barCount2 = 0, 
    count; 

    function elemClicked (e) { 
    count = e.data.count; 
    count++; 
    console.log(count); 
    $(this).siblings('.counter').html(count); 
    } 

    $foo.click({count: fooCount1 }, elemClicked); 
    $bar.click({count : barCount2 }, elemClicked); 

}) 

Und das ist, was die HTML aussieht zu erreichen:

<div class="elems"> 
    <img class="pic" src="/path/img1.jpg" id="foo" alt="foo"> 
    <div class="counter"></div> 
</div> 
<div class="elems"> 
    <img class="pic" src="/path/img2.jpg" id="bar" alt="bar"> 
    <div class="counter"></div> 
</div> 

Der Zähler nicht für jeden Klick erhöht erhalten wird. Wie kann der Zähler bei jedem Klick erhöht werden? Gibt es auch einen eleganteren Weg, um das zu erreichen, was ich hier versuche?

Answer 1

$(".elems .pic").click(function() { 
 
var incClick \t = typeof($(this).attr("d-click"))=="undefined" ? 0 : $(this).attr("d-click"); 
 
    incClick \t = parseInt(incClick); 
 
    incClick++; 
 
    $(this).attr("d-click", incClick); 
 
    $(this).next().html(incClick); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elems"> 
 
    <img class="pic" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" id="foo" alt="foo"> 
 
    <div class="counter"></div> 
 
</div> 
 
<div class="elems"> 
 
    <img class="pic" src="http://placehold.it/350x150" id="bar" alt="bar"> 
 
    <div class="counter"></div> 
 
</div>

Oben ist der recht einfache Code, durch die man leicht zählen auslösen klicken.

Jedes Mal, wenn ein Bild geklickt wird, enthält das aktuelle Bild ein Attribut mit dem Namen d-click mit erhöhtem Wert. und das gleiche ist unter .html()