带有 Jquery 变量的 Foreach 循环

Question

我有以下代码：

HTML：

<div class="single-count_contain">
<div class="less"><img src="img/single_arrow_left.png"></div>
<div class="theCount">1</div>
<div class="add"><img src="img/single_arrow_right.png"></div>
</div>

JS：

var counter = 1;

$(".add").click(function(){

counter++;

$(this).closest(".single-count_contain").find(".theCount").text(counter);

});


$(".less").click(function(){

 counter--;

$(this).closest(".single-count_contain").find(".theCount").text(counter);

});  

这按预期工作，增加和减少我的计数器变量。但我需要在 foreach 循环中使用它。

我怎样才能有相同的变量，但每个计数器生成的结果不同，但 foreach 循环？

谢谢！

Answer 1

鉴于 count 元素将始终包含一个值，最简单的方法是读取 count 元素的文本，将其解析为整数并更新它。

例如

$(".add").click(function() {

  var $count = $(this).closest(".single-count_contain").find(".theCount");
  $count.text(parseInt($count.text()) + 1);

});

$(".less").click(function() {

  var $count = $(this).closest(".single-count_contain").find(".theCount");
  $count.text(parseInt($count.text()) - 1);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="single-count_contain">
  <div class="less"><img src="img/single_arrow_left.png"></div>
  <div class="theCount">1</div>
  <div class="add"><img src="img/single_arrow_right.png"></div>
</div>

<div class="single-count_contain">
  <div class="less"><img src="img/single_arrow_left.png"></div>
  <div class="theCount">1</div>
  <div class="add"><img src="img/single_arrow_right.png"></div>
</div>

您也可以使用.siblings() 函数来选择计数元素。

例如

var $count = $(this).siblings(".theCount");

更新

要更新数据计数器值，您可以这样做：

var count = parseInt($count.text()) + 1;
$count.text(count).data("counter", count);

另一种解决方案

$(".single-count_contain").each(function() {
  var counter = 1;
  
  $(this).on("click", ".less,.add", function() {
    if ($(this).hasClass("less"))
      counter--;
    else
      counter++;

    $(this).siblings(".theCount").text(counter).data("counter", counter);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="single-count_contain">
  <div class="less"><img src="img/single_arrow_left.png"></div>
  <div class="theCount">1</div>
  <div class="add"><img src="img/single_arrow_right.png"></div>
</div>

<div class="single-count_contain">
  <div class="less"><img src="img/single_arrow_left.png"></div>
  <div class="theCount">1</div>
  <div class="add"><img src="img/single_arrow_right.png"></div>
</div>