javascript - 总价计算器逻辑难度

Question

我有两个数字输入，我想做的是动态地获得总价。问题是，当我减少数量时，它仍在添加并且无法正常工作。实际上我的大脑无法想象任何正确编码的方法。有人可以给我任何线索吗？

<input type="number" name="open" id='open' min="0" max="20"> 
<input type="number" name="vip"  id='vip' min="0" max="20"> 
<p> Total Price: <span id='doZaplaty'>0</span> EURO</p>
<script>
  var vipPrice = 290;
  var openPrice = 80;
  var totalPrice = 0
  $('#open').on("change", function() {
    totalPrice = totalPrice + ($("#open").val() * openPrice);
    $("#doZaplaty").html(totalPrice);
  });

  $('#vip').on("change", function() {
    totalPrice = totalPrice + ($("#vip").val() * vipPrice);
    $("#doZaplaty").html(totalPrice);
  });
</script>

Answer 1

因为 totalPrice = totalPrice + ($("#open").val() * openPrice); 会把之前的结果加起来，正如我评论的那样。

但是，您有 2 个不同的总计要考虑，因此保持只有一个总计的状态并不容易，因为您需要减去之前的结果，或者计算与之前值的变化。

相反，您可以有 2 个不同的总数，例如 openTotal 用于 #open 的结果和 vipTotal 用于 #vip 的结果，那么你可以使用 openTotal = ($("#open").val() * openPrice); 来获取当前状态。而当你需要输出结果时，使用$("#doZaplaty").html(openTotal + vipTotal);来显示最终的总数。

var vipPrice = 290;
var openPrice = 80;
var openTotal = 0;
var vipTotal = 0;

$('#open').on("change", function() {
  // As the totals are separated, we just need to get its current values computed.
  openTotal = ($("#open").val() * openPrice);
  $("#doZaplaty").html(openTotal + vipTotal);
});

$('#vip').on("change", function() {
  vipTotal = ($("#vip").val() * vipPrice);
  $("#doZaplaty").html(openTotal + vipTotal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Total Price: <span id='doZaplaty'>0</span> EURO</p>
<input type="number" name="open" id='open' min="0" max="20"> 
<input type="number" name="vip"  id='vip' min="0" max="20">