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

首先，将click事件附加到两个图像上，然后使用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>

Answer 2

您可以在一个事件侦听器中增加和减少目标数目。同样使用.text( fucntion )，代码更简单

$(document).on("click", ".minusbutton, .plusbutton", function() {
  var ele = $(this);
  $('.parquantity').text(function(i, t){
    return ele.is(".plusbutton") ? +t+1 : +t-1;
  });
});

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

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

2 个答案: