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

How to track click events on individual dom elements using jQuery and update their click counter accordingly?

本文关键字：计数器 更新 事件 何使用 dom 单个 跟踪 元素 jQuery      更新时间：2024-01-10

我正在尝试使用相同的方法跟踪两个图像上的点击次数。以下是我为实现这一目标而编写的代码：

$(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").click(function() {
var incClick	= typeof($(this).attr("d-click"))=="undefined" ? 0 : $(this).attr("d-click");
  incClick	= 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>

上面是非常简单的代码，通过它可以轻松地触发点击计数。

每次点击图片时，当前图片都会保存一个名为d-click的属性，该属性的值会递增。并且在CCD_ 2

下表示相同
相关文章：