从多个数字字段中计算值-jQuery

Question

我试图根据数量和价格计算价格，并通过将所有产品的价格相加来计算小计。

下面是html的代码

<tr>
    <td>
        <input min="0" data-unit-price="9.99" class="se-ticket-qty" type="number" value="0" />
    </td>
</tr>
<tr>
    <td>
        <input min="0" data-unit-price="19.99" class="se-ticket-qty" type="number" value="0" />
    </td>
</tr>
<tr>
    <td>
        <h3><span class="se-curency">$</span><span data-sub-total="0" id="se-sub-total" class="se-total-amount">0</span></h3>
        <h3><span class="se-curency">$</span><span id="se-vat" class="se-total-amount">8</span></h3>
    </td>
</tr>

我正在尝试下面的js

---

jQuery( document ).on( 'input', '.se-ticket-qty', function() {
    var sum = 0;
    jQuery(this).each(function(i){
        var unit_price = jQuery(this).data('unit-price');
        var amount = jQuery(this).val();

        var current_sub_total = parseFloat(unit_price);

        sum += current_sub_total;

        var sub_total = jQuery('#se-sub-total').attr('data-sub-total');

        var final_sub_total = parseFloat(sub_total) + sum;
        jQuery('#se-sub-total').attr('data-sub-total', final_sub_total.toFixed(2));
        jQuery('#se-sub-total').html(final_sub_total.toFixed(2));
    });
    console.log(sum);
});

但是在计算时会出错。如果我在数字字段中使用上箭头，则小计工作正常。但是如果我在箭头下方使用或手动输入数字，则小计将无法正常工作。

Answer 1

您似乎在如何使用每种逻辑以及将总计相加时遇到了一些小问题。这是一个片段，可以完成我认为您尝试做的事情。只需取消注释console.logs即可查看操作顺序如何更改最终总和的计算方式。我不确定第二个8美元的显示器想要什么：

// Shorthand for $( document ).ready()
$(function() {
   console.log( "ready!" );
        
   $(document).on('input', '.se-ticket-qty', function(){
     CalculateTotal();
   });
});

function CalculateTotal(){
  var sum = 0;
      
  $(".tableWithInputs").find( ".se-ticket-qty" ).each(function( index ){
    var unit_price = parseFloat($(this).data('unit-price'));
  var amount = parseFloat($(this).val());
  var totalPrice = unit_price * amount;
  //console.log("unit_price: " + unit_price);
  //console.log("unit_price: " + unit_price);
  //console.log("amount: " + amount);
  //console.log("totalPrice: " + totalPrice);

        sum += parseFloat(totalPrice); 
      });
      
      $('#se-sub-total').attr('data-sub-total', sum.toFixed(2));
      $('#se-sub-total').text(sum.toFixed(2));
      //console.log(sum.toFixed(2));
    }

     

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableWithInputs">
    <tr>
        <td>
            <input min="0" data-unit-price="9.99" class="se-ticket-qty" type="number" value="0" />
        </td>
    </tr>
    <tr>
        <td>
            <input min="0" data-unit-price="19.99" class="se-ticket-qty" type="number" value="0" />
        </td>
    </tr>
    <tr>
        <td>
        <h3><span class="se-curency">$</span><span data-sub-total="0" id="se-sub-total" class="se-total-amount">0</span></h3>
        <h3><span class="se-curency">$</span><span id="se-vat" class="se-total-amount">8</span></h3>
    </td>
    </tr>
 </table>