Question

我试图显示添加了多少特定类型的产品，因此我将其保存在变量中。现在，当您点击其他产品时，我会暂停此变量，并显示此新产品保留的点击次数，仅当您现在点击需要将旧产品添加1的第一个产品时

所以2点击第一个产品，显示2
现在点击第二个产品，显示3
再点击第一个产品，需要显示3但现在是显示1

如何保存变量供以后使用并调用？

＆＃13;

i = 0;
_this = null;
$(".addtocard").click(function() {
  i++
  if (this == _this) {
    _this = this;
    $(_this).closest(".productbox").find(".productbox-add").addClass("addedproduct");
    $(_this).closest(".productbox").find(".productbox-add").text(i + "x");
  } else {
    i = 1;
    _this = this;
    $(_this).closest(".productbox").find(".productbox-add").addClass("addedproduct");
    $(_this).closest(".productbox").find(".productbox-add").text(i + "x");

  }
});

＆＃13;

.addtocard {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox">
  <span class="addtocard">add to card</span>
  <br>
  <span class="productbox-add">Number</span>
</div>
<br>
<div class="productbox">
  <span class="addtocard">add to card</span>
  <br>
  <span class="productbox-add">Number</span>
</div>
<br>

＆＃13;

Answer 1

您的代码中的问题是您正在使用共享的全局计数器来存储每个产品的计数。

您可以使用data-api存储每个项目的计数

$(".addtocard").click(function() {
  var $this = $(this),
    count = $this.data('count') || 0;
  count++
  $this.closest(".productbox").find(".productbox-add").addClass("addedproduct").text(count + "x");
  $this.data('count', count)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox">
  <span class="addtocard">add to card</span>
  <br>
  <span class="productbox-add">Number</span>
</div>
<br>
<div class="productbox">
  <span class="addtocard">add to card</span>
  <br>
  <span class="productbox-add">Number</span>
</div>
<br>

JQuery保存对特定类的点击并稍后显示

1 个答案: