总价计算器逻辑难度

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>

- divHelper11

---

totalPrice = totalPrice + ($("#open").val() * openPrice); 这段代码会将新的结果与之前的结果相加。如果你只想要当前的结果，应该使用 totalPrice = ($("#open").val() * openPrice);。由于你使用了两个不同的值来计算总价，所以当你需要时，只需通过 vipTotal + openTotal 获取 totalPrice 即可。 - fuyushimoya

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

- fuyushimoya

Answer 2

因为你总是将 totalPrice 加上去。尝试使用以下代码（未经测试）：

    <script>
        var totalPrice = 0
        function GetTotalPrice(vipNum,openNum){
            var vipPrice = 290;
            var openPrice = 80;
            var total = vipNum * vipPrice + openNum * openPrice;
            return total;
        }

        $('#open').on("change", function(){
            totalPrice = GetTotalPrice($("#vip").val(),$("#open").val());
            $("#doZaplaty").html(totalPrice);
        });

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

- Marcus

Answer 3

请尝试使用这种简单的方法。

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

设置2个隐藏字段来存储临时计算值

<input type="hidden" name="totalPriceopenTemp" id='totalPriceopenTemp' value="0"> 
<input type="hidden" name="totalPricevipTemp"  id='totalPricevipTemp' value="0"> 

<p> Total Price: <span id='doZaplaty'>0</span> EURO</p>
<script>
  var vipPrice = 290;
  var openPrice = 80;
  var totalPrice = 0;
  var totalPriceopenTemp = 0;
  var totalPricevipTemp = 0;

  $('#open').on("change", function() {
    totalPriceopenTemp = ($("#open").val() * openPrice);
    $("#totalPriceopenTemp").val(totalPriceopenTemp);
    totalPrice = parseInt($("#totalPriceopenTemp").val())+parseInt($("#totalPricevipTemp").val());
    $("#doZaplaty").html(totalPrice);
  });

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

我认为这对你会有用

- Shaymol Bapary