javascript - 动态设置总价的值 - javascript

Question

我的问题在于 <legend class="final" >Total Order $: <span></span></legend>
显示我的总和。发生的事情是，当我输入像 1 or 2 or 3 这样的数字时在数量文本框中，它加起来很准确

但是当我输入 12 时(两位数)它没有给我准确的结果，当还清除数量框时，总和不会移动到之前的数字，而是保持不变。

PS:对不起我的英语不好，我是一个 JS 初学者

HTML

<input onclick="return checkout(this)" type="checkbox" /> 
<legend class="final" >Total Order $: <span></span></legend> 

<div class="panel" id="panel"></div>

JS

<script type="text/javascript">
function checkout(data)
  { 
    if(data.checked == true) {
      $('.panel').append(
        '<div class="container"> ' +    
        '<p class="name"> Item: ' + data.name + '</p>' +
        '<p class="price" data-price="' + data.price + '">Price : ' + data.price + '</p>'+
        '<input type="text" class="quantity" placeholder="Enter Quantity" name="quantity[]" /><br><br>' +
        '<p class="total" >Total Price  $:<span name="total" id="total"></span></p>' +
        '</div>'
      ).appendTo('form');
    }
    else {
      $(".panel .container [data-id=" + data.id + "]").parent().remove();  
    }
}

$('.panel').on('keyup','.quantity',function()
  {
    var container = $(this).closest('div');
    var quantity = Number($(this).val());
    var price = 
    Number($(this).closest('div').find('.price').data('price'));    

    container.find(".total span").text(quantity * price);

    sum += quantity*price;

    console.log('Grand Cost ' +sum);

    $('.final span').text(sum);

  }
);
</script>

Answer 1

计算不正确:

sum += quantity*price;

应该是

var sum = quantity*price;

因为您正在计算行总数。

如果您尝试为多行创建总计，您需要在按键处理程序中并在计算行总计后执行此操作。

       var sum = 0;

       $(".line-total").each(function(){
       sum = sum + Number($(this).text());
       })                

       $('.final span').text(sum);

请注意，我在 line total span .line-total 上使用了一个类，并在我的结帐中圈出了所有总数

        '<div class="container"> ' +    
        '<p class="name"> Item: ' + data.name + '</p>' +
        '<p class="price" data-price="' + data.price + '">Price : ' + data.price + '</p>'+
        '<input type="text" class="quantity" placeholder="Enter Quantity" name="quantity[]" /><br><br>' +
        '<p class="total" >Total Price  $:<span class="line-total" name="total" id="total"></span></p>' +
        '</div>'

查看新 fiddle :

https://jsfiddle.net/tsm6d4zp/3/