Javascript 如何使用jQuery跟踪单个dom元素上的单击事件并相应地更新其单击计数器？

我试图用同样的方法追踪两张图片的点击次数。下面是我为实现同样的目标而编写的代码-

$(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 );

})

这就是HTML的外观：

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

计数器不会每次单击都递增。如何在每次单击时增加计数器？还有，有没有更优雅的方式来实现我在这里尝试的目标？

$（“.elems.pic”）。单击（函数（）{
var incClick=typeof（$（this.attr）（“d-click”）==“未定义”？0:$（this.attr）（“d-click”）；
incClick=parseInt（incClick）；
incClick++；
$（this.attr（“d-click”，incClick）；
$（this）.next（）.html（单击）；
});

你的意思是，每次单击都要计数+？如果你点击一张图片，即使是另一张图片点击事件也会被触发？这很有效，谢谢！但是你知道为什么在我尝试的方法中，count的值没有增加吗？因为
fooCount1
和
fooCount2
始终为零，因为它们没有在函数下分配增加的值，我相信这可能是原因。