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")分配给变量，但是每次点击都会重置计数器的值，因此，只有＆＃34; 1＆＃34;永远不会进一步展示。另一方面，如果我在全局范围内创建变量"count"，则它不会单独增加每个cat的计数，但会将"count"值视为它们之间共享。有没有办法修改我的代码以使其正常工作？

这是当前的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是你想要的吗？

 <Button
    android:elevation="3dp"
    android:id="@+id/buttonsuggest"
    android:clickable="false"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Other Suggested Words"/>

它会正确增加数字。

<强>演示

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

<强> DEMO2

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

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

jQuery - 如何增加值而不将其赋值给变量

1 个答案: