使用jQuery单击活动和非活动按钮后如何计算价格

Question

当我单击订购按钮时，如果我重新单击订购按钮以取消订单，我想计算价格，则价格将下降；如果单击更多，则价格将上升，然后显示总价格。我已经完成了不活动的活动，但是无法计算价格的增/减，我该怎么办..请帮助我

$(document).ready(function() {
  var price = 0;
  $('.btn').click(function() {
    var priceValue = $(this).val();
    if ($(this).hasClass("active")) {
      $(this).removeClass('active');
      var price = price + $(this).val();
    } else {
      $(this).addClass('active');
      var price = price - $(this).val();
    }
    alert(price)
   $('#priceDisplay').val(price);
  })
})

.btn {
  color: white;
  background: orange;
}

.active {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <h2>Menu</h2>
  <table class="table table-bordered">
    <tbody>
      <tr>
        <td>Rice</td>
        <td><button type="button" id="button" class="btn" value="30">Order</button></td>
        <td>30</td>
      </tr>
      <tr>
        <td>Egg</td>
        <td><button type="button" id="button" class="btn " value="25">Order</button></td>
        <td>25</td>
      </tr>
      <tr>
        <td>dal</td>
        <td><button type="button" id="button" class="btn " value="20">Order</button>
        </td>
        <td>20</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="priceDisplay"></div>

Answer 1

尝试一下

$(document).ready(function() {
  var price = 0;
  $('.btn').click(function() {
    var priceValue = $(this).val();
    if ($(this).hasClass("active")) {
      $(this).removeClass('active');
      
       price = price - parseInt($(this).val());
    } else {
      $(this).addClass('active');
       price = price + parseInt($(this).val());
    }
   $('#priceDisplay').text(price);
  })
})

.btn {
  color: white;
  background: orange;
}

.active {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <h2>Menu</h2>
  <table class="table table-bordered">
    <tbody>
      <tr>
        <td>Rice</td>
        <td><button type="button" id="button" class="btn" value="30">Order</button></td>
        <td>30</td>
      </tr>
      <tr>
        <td>Egg</td>
        <td><button type="button" id="button" class="btn " value="25">Order</button></td>
        <td>25</td>
      </tr>
      <tr>
        <td>dal</td>
        <td><button type="button" id="button" class="btn " value="20">Order</button>
        </td>
        <td>20</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="priceDisplay"></div>

Answer 2

问题在于，当您不将值解析为int时。 经过小小的更新后，您可以尝试以下方法：

$(document).ready(function() {
  var price = 0;
  $('.btn').click(function() {
    var priceValue = $(this).val();
    if ($(this).hasClass("active")) {
      $(this).removeClass('active');
      price += parseInt($(this).val());
    } else {
      $(this).addClass('active');
      price -= $(this).val();
    }
    alert(price)
   $('#priceDisplay').text(price);
  })
})