Question

我试图为我正在制作的网站制作一些+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>

Answer 1

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>

关于jquery counter ++ counter--

1 个答案: