所以我想添加一个产品,同时更新购物车中的总价格。
$(".articel input[type='button']").click(function() {
var price = $(this).siblings("input[name='price']").attr("value");
var quantity = $(this).siblings("input[type='number']").attr("value");
if (quantity % 1 != 0) {
alert("You must add a whole number");
}
else if (quantity <= 0) {
alert("You can not add a negative number or nothing");
}
else {
var name = $(this).siblings("input[name='prodname']").attr("value");
var ul = document.getElementById("buylist");
var totalprice = quantity * price;
var prod = name + " x " + quantity + "= " + totalprice + "$";
var el = document.createElement("li");
el.innerHTML = prod;
ul.appendChild(el);
}
});
});
以下是产品和总价格的增加位置:
<h4>Shopping Cart</h4>
<div id="buylist">
<ul>
</ul>
<div id="totalprice">
<h4>Total price:<h4>
</div>
</div>
<a href="#checkout" onClick="checkOut()" class="click" data-toggle="tab" id="form">Checkout</a>
</div>
这是我将产品添加到购物车的其中一种形式
<form class="articel">
Quantity: <input type="number" style="width:30px;"><br>
Add to cart: <input type="button" class="btn">
<input type="hidden" value="30" name="price">
<input type="hidden" value="The walking dead" name="prodname">
</form>
答案 0 :(得分:2)
也许我真的不明白。但是当产品或其数量发生变化时,您必须计算价格。我建议你已经有了这两个动作的事件。然后我会运行一个计算价格的函数。
现在,这取决于您是否已经有固定价格,或者还必须将其与数量相乘。循环浏览产品并计算价格。
注意:选择价格&amp;数量我使用了你的代码中实际没有的选择器。
function calculatePrice() {
var quantity, price, sum = 0;
//loop through product "blocks"
$('.articel').each(function() {
price = $(this).children('.price').val();
quantity = $(this).children('.quantity').val();
//Add price to sum if number
if (!isNaN(price) && !isNaN(quantity)) {
sum += price * quantity;
}
});
//Update Price
$('#totalprice').html('<h4>Total price:' + sum + '</h4');
}
答案 1 :(得分:0)
如果您将价格和数量添加到UL,您可以轻松处理:
<ul>
<li data-quantity="X" data-price="Z">...</li>
</ul>
将此功能添加到javascript文件中。
function calcTotal (ul) {
var newTotal = 0;
ul.find('li').each( function(i,e) {
var li = $(e);
newTotal += li.data('quantity') * li.data('price');
});
}
然后在你的代码中,那里有最后一个:
itemPrice = quantity * price;
var prodDesc = name + " x " + quantity + "= " + itemPrice + "$";//same as it was.
var newLi = $("<li>");
newLi.text(prodDesc).data('quantity', quantity).data('price', price);
ul.append(newLi);
var totalPrice = calcTotal(ul);
$('#totalprice h4').text('Total Price: ' + totalPrice);
或多或少就是这样。