iv'e用jquery制作了一个购物车（不是一个真正的，只是为了练习。我知道这是不安全的），并且我将产品制成可拖动的，这使您可以选择将其从目录中拖动到购物车中。我的问题是，我想添加一个总计部分，该总计部分将为我提供拖到购物车中的每种产品的总价。iv'e尝试了以下代码，但是没有用。感谢您的时间。
<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/
我将在此处编写两个单独的函数-一个用于汇总价格，另一个用于显示该总和。在下面，我假设您的#shoppingCart中的每个价格都有一个包装。这通常是个好习惯，因为它可以避免不必要的处理，并使代码更简洁：
function getTotalCost() {
var totalPrice = 0;
$("#shoppingCart").find(".price").each(function() {
totalPrice += parseFloat($(this).html());
});
return totalPrice;
}
function updateCartTotal() {
$("#cartSum").html( getTotalCost() );
}
然后，只需更新#cartSum“购物车”的更新时间即可；我建议使用jQuery的draggable的“ stop”事件，该事件在拖动停止时触发：
$('.product').draggable({
stop: updateCartTotal
});
并且由于您的情况也有一个“删除”按钮，因此如果删除了任何内容，则应该更新购物车：
var buttonHTML = "... <button id='butt' onclick='one(this); updateCartTotal();'>delete item</button>"
$('#shoppingCart').append(buttonHTML) ;
但是，从您的代码中删除了许多旧的杂物后，我发现它更干净只是为了更新“可投放”事件中的#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();
}
});
...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句