jQuery 购物车求和小计以计算总价

Question

我有 2 个购物车项目，只是想通过使用价格、数量、小计来计算总价，但它返回 NaN 输出。

我尝试了 parseFloat 但我不知道我哪里出错了。

希望我能得到一些帮助谢谢...

HTML 代码：

 <tr class="cart">
                    <td class="pt-3">
                      <img class="img-fluid rounded-pill float-left col-md-3 "  src="{{asset('front/')}}/assets/img/1.png"  alt="">
                      <div class="title pb-2">Margarhitta</div>
                      <div class="description" >Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd</div>
                    
                    </td>

                    <td  class="text-center"> 

                    <span class="price"><strong>13.99</strong></span>
                    
                    </td>
                    <td  class="text-center">
                      
                     
                    <input class="qty form-control" type="number" value="1" min="1">
                      
                      
                    </td>
                    <td  class="text-center">
                    <span class="subtotal">13.99</span>
                      
                    </td>
                    <td>
                    <a href="javascript:void(0)" class="remove"  ><i class="icofont-trash"></i></a>
                    </td>
                    
                
                </tr>
                
            </tbody>

          </table>
          <span class="float-right" style="color:white" id="total">0</span>

jQuery 代码：.................................................. .

$('.qty').change(function() {
      updateQuantity(this);
    });


    function recalculateCart(){
      subtotal = 0 ;
      var cartRow = $('.price').closest('tr');

      cartRow.each(function(){
        subtotal += parseFloat($(this).children('.subtotal').text());
      })
      
      $('#total').html(subtotal.toFixed(2));



    }

    function updateQuantity(qtyInput){
      var cartRow = $(qtyInput).closest('tr');
      var price = parseFloat($('.price', cartRow).text());
      var quantity = $('.qty',cartRow).val();
      var subtotal = $('.subtotal', cartRow);
      var linePrice = price * quantity;

      subtotal.each(function(){
        $(this).text(linePrice.toFixed(2));
         recalculateCart();
      })
    } 

Answer 1

您需要检查跨度小计值是否不为空，如果是则仅使用parseFloat() 否则将该跨度的值作为0 并进行进一步计算。

演示代码：

$('.qty').change(function() {
  updateQuantity(this);
});


function updateQuantity(qtyInput) {
  var cartRow = $(qtyInput).closest('tr');
  var price = parseFloat($('.price', cartRow).text());
  var quantity = $('.qty', cartRow).val();
  var subtotal = $('.subtotal', cartRow);
  var linePrice = price * quantity;
  $(subtotal).text(linePrice.toFixed(2));
  total_calculate() //call
}

function total_calculate() {
  var total = 0;
  //loop through subtotal
  $(".cart .subtotal").each(function() {
    //chck if not empty
    var value = $(this).text() != "" ? parseFloat($(this).text()) : 0;
    total += value; //add that value
  })
  //assign to total span
  $("#total").text(total.toFixed(2))
}
total_calculate()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="cart">
    <td class="text-center">
      <span class="price"><strong>13.99</strong></span>
    </td>
    <td class="text-center">
      <input class="qty form-control" type="number" value="1" min="1">
    </td>
    <td class="text-center">
      <span class="subtotal">13.99</span>
    </td>
    <td>
      <a href="javascript:void(0)" class="remove"><i class="icofont-trash"></i></a>
    </td>
  </tr>
  <tr class="cart">
    <td class="text-center">
      <span class="price"><strong>13.99</strong></span>
    </td>
    <td class="text-center">
      <input class="qty form-control" type="number" value="1" min="1">
    </td>
    <td class="text-center">
      <span class="subtotal">13.99</span>
    </td>
    <td>
      <a href="javascript:void(0)" class="remove"><i class="icofont-trash"></i></a>
    </td>
  </tr>

</table>

<span class="float-right" style="color:blue" id="total">0</span>