jQuery - 如何在不将值赋给变量的情况下增加值

Question

我一直在查看与jQuery和增量相关的问题，没有一个答案为我提供解决方案，因为他们建议在全局范围内创建初始值为0的变量。

我的问题是：我的页面上有两只猫用class="cat"。我需要听一下这些猫的任何一个点击并显示一个特定猫的点击计数器：

<div class="cat-1">
    <h2>Micky</h2>
    <p>Number of clicks: <span class="count-display"></span></p>
    <img src="img/kitty.jpg" class="cat" data-counter>
</div>
<div class="cat-2">
    <h2>John</h2>
    <p>Number of clicks: <span class="count-display"></span></p>
    <img src="img/kitty.jpg" class="cat" data-counter>
</div>

如果++增量可以起作用，下面的代码将起作用，但它会产生错误。

$(".cat").click(function(event) {
    $(event.target).data("counter")++;
    $(event.target).parents().find(".count-display").text($(event.target).data("counter"));
});

我尝试将$(event.target).data("counter")分配给变量，但随后每次点击都会重置计数器的值，因此，只显示“1”而不进一步计算。另一方面，如果我在全局范围内创建变量"count"，则它不会单独增加每只猫的计数，但它会将"count"值视为它们之间共享。有没有办法修改我的代码以使其工作？

这是当前的片段：

    $(".cat").click(function(event) {
    	$(event.target).data("counter")++;
    	$(event.target).parents().find(".count-display").text($(event.target).data("counter"));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat-1">
        <h2>Micky</h2>
        <p>Number of clicks: <span class="count-display"></span></p>
        <img src="img/kitty.jpg" alt="cat1" class="cat" data-counter>
    </div>
    <div class="cat-2">
        <h2>John</h2>
        <p>Number of clicks: <span class="count-display"></span></p>
        <img src="img/kitty.jpg" alt="cat2" class="cat" data-counter>
    </div>

Answer 1

这是你想要的吗？

$(".cat").click(function(event) {
  var num = parseInt($(event.target).data("counter")) || 0;
  $(event.target).data("counter", num + 1);
  $(event.target).parent().find(".count-display").text($(event.target).data("counter"));
});

它会正确地增加数量。

演示

$(".cat").click(function(event) {
  var num = parseInt($(event.target).data("counter")) || 0;
  $(event.target).data("counter", num + 1);
  $(event.target).parent().find(".count-display").text($(event.target).data("counter"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat-1">
  <h2>Micky</h2>
  <p>Number of clicks: <span class="count-display"></span></p>
  <img src="img/kitty.jpg" class="cat" data-counter>
</div>
<div class="cat-2">
  <h2>John</h2>
  <p>Number of clicks: <span class="count-display"></span></p>
  <img src="img/kitty.jpg" class="cat" data-counter>
</div>

DEMO2

$(".cat").click(function(event) {
  $(event.target).data("counter", (parseInt($(event.target).data("counter")) || 0) + 1);
  $(event.target).parent().find(".count-display").text($(event.target).data("counter"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat-1">
  <h2>Micky</h2>
  <p>Number of clicks: <span class="count-display"></span></p>
  <img src="img/kitty.jpg" class="cat" data-counter>
</div>
<div class="cat-2">
  <h2>John</h2>
  <p>Number of clicks: <span class="count-display"></span></p>
  <img src="img/kitty.jpg" class="cat" data-counter>
</div>