jQuery

Question

我一直在查看与 jQuery 和增量相关的问题，none 的答案为我提供了解决方案，因为他们建议在全局范围内创建一个初始值为 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>

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

jQuery - how to increment a value without assigning it to variable

increment