javascript - 计算多个数字字段的值 - 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>