时间戳

首页 > 解决方案 > 关于jquery counter++ counter--

jquery - 关于jquery counter++ counter--

问题描述

我尝试为我正在制作的网站制作一些 +1 和 -1 按钮，并且它仅在 1 个对象上运行良好。但是，例如，当我已经按下一个按钮 7 次并显示 7 时，当我按下另一个按钮时，它会变为 7+1。我尝试为每个按钮制作不同的变量，但没有奏效。所以我的问题是如何解决这个问题，如何让每个按钮自己工作。

另外，当我这样做的时候，我怎样才能尽可能地有效地利用这段代码呢？有什么方法可以用更少的行编写 JS 代码吗？

var counter = 0;

$(document).ready(function() {
  $(".addMe").click(function() {
    counter++;

    $(".theCount").text(counter);
  });
  $(".removeme").click(function() {
    counter--;

    $(".theCount").text(counter);
  });

  $(".addMe2").click(function() {
    counter++;

    $(".theCount2").text(counter);
  });
  $(".removeme2").click(function() {
    counter--;

    $(".theCount2").text(counter);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li>
  <img src="../Bilder/lakritsone.jpg" alt="bild på något">
  <div class="theCount">0</div>
  <button class="addMe">+1</button>
  <button class="removeme">- 1</button>
</li>
<li>
  <img src="../Bilder/lakritsone.jpg" alt="bild på något">
  <div class="theCount2">0</div>
  <button class="addMe2">+1</button>
  <button class="removeme2">- 1</button>
</li>

标签： jqueryhtml

解决方案

var counter = 0;

$(document).ready(function() {

  $(".addMe").click(function() {
  var target = $(this).parents('li').find(".theCount");
  var count = parseInt(target.text().trim())
  count += 1;
  target.text(count);
  });
  
  $(".removeme").click(function() {
    var target = $(this).parents('li').find(".theCount");
  var count = parseInt(target.text().trim())
  count -= 1;
  target.text(count);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li>
  <img src="../Bilder/lakritsone.jpg" alt="bild på något">
  <div class="theCount">0</div>
  <button class="addMe">+1</button>
  <button class="removeme">- 1</button>
</li>
<li>
  <img src="../Bilder/lakritsone.jpg" alt="bild på något">
  <div class="theCount">0</div>
  <button class="addMe">+1</button>
  <button class="removeme">- 1</button>
</li>

推荐阅读