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

Question

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

$(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>