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个不同的总数，因此仅使用一个总数来保持状态并不容易，因为您需要减去之前的结果，或者计算之前值的变化。 / p>

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

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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>

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>

我认为这对你有用

总价计算器逻辑难度

3 个答案: