javascript - 无法弄清楚如何在 jquery 中将 "total price"部分添加到我的购物车

Question

我用 jquery 做了一个购物车(不是真的，只是为了练习。我知道这不安全)我把产品做成可拖动的，这样你就可以选择将它们从目录拖到购物车。我的问题是我正在尝试添加一个总计部分，该部分将给我拖入购物车的每种产品的总价。我试过以下代码，但没有用。谢谢你的时间。

<section id="productCatalog">
    <div class="product" >
        <h2 class="des">Product 1 </h2>
        <p class="description"> price: </p>
        <p class="price" id="pro1">400</p>
    </div>
    <div class="product">
        <h2 class="des">Product 2 </h2>
        <p class="description"> price: </p>
        <p class="price" id="pro2">200</p>
    </div>
    <div class="product">
        <h2 class="des">Product 3 </h2>
        <p class="description"> price: </p>
        <p class="price" id="pro3">900</p>
    </div>
    <div class="product">
        <h2 class="des">Product 4 </h2>
        <p class="description"> price: </p>
        <p class="price" id="pro4">152.30</p>
    </div>
   </section>
   <section id="shoppingCart">
    <h2 align="center">shopping cart</h2>
    total:
    <span id="cartSum">0</span>
   </section>

<script>
    $(function(){


        $('.product').draggable({ 
            scroll: false, 
            containment: 'document' , 
            revert: true,
            start: function()
            {
                contents = $(this).text();
            }
         });    


           var price = parseInt($(".selected").text()); 
          var cartSum = $("#cartSum").text();



          $('#shoppingCart').droppable({ hoverClass: 'border', accept: '.product', drop: function()
          {

             $('#shoppingCart').append("<div  class='selected'>" + contents + "</div>" + "<button id='butt' onclick='one(this)'>delete item</button>" ) ;
             cartSum = price;
             function updateCartTotal(){
            $("#cartSum").text(cartSum); 

        }
          }}); 

          window.one = function(obj){

        var item = $(obj).prev().andSelf().remove(); 


    }

    });
</script>

我还包括 jsfiddle - http://jsfiddle.net/kshayk/QbNtX/

Answer 1

我会在这里编写两个单独的函数 -- 一个用于计算价格总和，另一个用于显示该总和。下面我假设您的#shoppingCart 中的每个价格都有一个包装。这通常是一种很好的做法，因为它可以让您避免不必要的处理并使您的代码更清晰:

function getTotalCost() {
  var totalPrice = 0;
  $("#shoppingCart").find(".price").each(function() {
    totalPrice += parseFloat($(this).html());
  });
  return totalPrice;
}

function updateCartTotal() {
  $("#cartSum").html( getTotalCost() );
}

当“购物车”更新时，只需更新 #cartSum 即可；我建议使用 jQuery's draggable's "stop" event ，当拖动停止时触发:

$('.product').draggable({ 
  stop: updateCartTotal       
});    

因为在你的情况下你也有一个“删除”按钮，如果有任何东西被删除你应该更新购物车:

var buttonHTML = "... <button id='butt' onclick='one(this); updateCartTotal();'>delete item</button>" 
$('#shoppingCart').append(buttonHTML) ;

---

但是，在从您的代码中删除了很多旧的困惑之后，我发现仅更新“droppable”事件中的#shoppingCart 总和就更清晰了(尽管任一事件都有效)。变化的核心如下所示:

...

$(document).on("click", ".deleteButton", function() {
    $(this).parent().remove();
    updateCartTotal();
});


$('#shoppingCart').droppable({
    hoverClass: 'border',
    accept: '.product',
    drop: function (event, ui) {
        var price = $(ui.draggable).find(".price").html();
        var item = $(ui.draggable).find(".des").html();
        var deleteButton = "<button class='deleteButton'>Delete</button>";
        var newCartEntry = "<div class='selected'>" + item +
            "<span class='price'>" + price + "</span>" + deleteButton +
            "</div>";
        $('#shoppingCart').append(newCartEntry);
        updateCartTotal();
    }
});

...

这是一个 Fiddle that describes what I mean .