javascript - 单击时如何在html中的<p>中增加一个数字

Question

如何在点击图片时增加 HTML 中 p 标签中的数字？我试过的代码似乎不起作用。

$(document).on("click", ".minusbutton", function() {
  $('.parquantity').html(parseInt($('.parquantity').html(), 10) + 1)
  alert('you clicked on button #');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amountCounter">
  <img class="minusbutton" src="/mcdb/Logos/minus.png" alt="minus">
  <div class="quantity">
    <p class="parquantity">1</p>
  </div>
  <img class="plusbutton" src="/mcdb/Logos/plus.png" alt="plus">
</div>

Answer 1

首先，将点击事件附加到两个图像然后你可以使用 text() 而不是 html() 因为你处理的是文本值(你不需要 HTML标签)。

你可以使用 ++/-- 在你点击的时候加减一个:

$(document).on("click", ".plusbutton", function() {
  var parquantity = parseInt($('.parquantity').text(), 10);
  $('.parquantity').text(++parquantity);
});

$(document).on("click", ".minusbutton", function() {
  var parquantity = parseInt($('.parquantity').text(), 10) - 1;

  if (parquantity > 0) {
    $('.parquantity').text(parquantity);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amountCounter">
  <img class="minusbutton" src="/mcdb/Logos/minus.png" alt="minus">
  <div class="quantity">
    <p class="parquantity">1</p>
  </div>
  <img class="plusbutton" src="/mcdb/Logos/plus.png" alt="plus">
</div>