[英]Shopping cart not working properly
購物車代碼:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<title>Shopping Cart</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>Shopping Cart</h1>
<div>
<ul>
<li><a class="add-to-cart" href="#" data-name="Apple" data-price="1.22">Apple $1.22</a></li>
<li><a class="add-to-cart" href="#" data-name="Banana" data-price="1.33">Banana $1.33 </a></li>
<li><a class="add-to-cart" href="#" data-name="Shoe" data-price="22.33">Shoe $22.33</a></li>
<li><a class="add-to-cart" href="#" data-name="Frisbee" data-price="5.22">Frisbee $5.22</a></li>
</ul>
<form>
<button id="clear-cart">Clear Cart</button>
</form>
</div>
<div>
<ul id="show-cart">
<!-- -->
</ul>
</div>
<script>
$(".add-to-cart").click(function(event) {
event.preventDefault();
var name = $(this).attr("data-name");
var price = Number($(this).attr("data-price"));
addItemToCart(name, price, 1);
displayCart();
});
function displayCart() {
console.log("*** Display Cart ***");
var cartArray = listCart();
var output = "";
for (var i in cartArray) {
output += "<li>"+cartArray[i].name+" "+cartArray[i].count+"</li>"
}
$("#show-cart").html(output);
}
displayCart();
// ************************************************************
// Shopping Cart Functions
var cart = [];
var Item = function(name, price, count) {
this.name = name
this.price = price
this.count = count
};
function addItemToCart(name, price, count) {
for (var i in cart) {
if (cart[i].name === name) {
cart[i].count += count;
return;
}
}
var item = new Item(name, price, count);
cart.push(item);
saveCart();
}
function removeItemFromCart(name) { // Removes one item
for (var i in cart) {
if (cart[i].name === name) {
cart[i].count --;
if (cart[i].count === 0) {
cart.splice(i, 1);
}
break;
}
}
saveCart();
}
function removeItemFromCartAll(name) { // Removes all item name
for (var i in cart) {
if (cart[i].name === name) {
cart.splice(i, 1);
break;
}
}
saveCart();
}
function clearCart() {
cart = [];
saveCart();
}
function countCart() { // --> return total count
var totalCount = 0;
for (var i in cart) {
totalCount += cart[i].count;
}
return totalCount;
}
console.log( countCart() );
function totalCart() { // --> return total cost
var totalCost = 0;
for (var i in cart) {
totalCost += cart[i].price;
}
return totalCost;
}
console.log( totalCart() );
function listCart() { // --> array of Items
var cartCopy = [];
for (var i in cart) {
var item = cart[i];
var itemCopy = {};
for (var p in item) {
itemCopy[p] = item[p];
}
cartCopy.push(itemCopy);
}
return cartCopy;
}
console.log( listCart() );
function saveCart() {
localStorage.setItem("shoppingCart", JSON.stringify(cart));
}
function loadCart() {
cart = JSON.parse(localStorage.getItem("shoppingCart"));
}
loadCart();
// Shopping Cart Functions (complete)
// ************************************************************
</script>
我有這個持久性錯誤,在重新加載時,它不會保存我所做的更改。 所以,例如,我已經訂購了2個價值一些的飛盤(現在沒關系),但是當刷新它,點擊訂購某個產品時,購物車不會保存更改,即使它是假設的至。 我不確定問題出在哪里,所以我把這一切粘在了這里。
當您增加購物車中已有商品的數量時,您永遠不會將商品保存到localstorage。
function addItemToCart(name, price, count) {
for (var i in cart) {
if (cart[i].name === name) {
cart[i].count += count;
//need to do this here too.
saveCart();
//
return;
}
}
var item = new Item(name, price, count);
cart.push(item);
saveCart();
}
否則,它只會在添加新項目時將購物車保存到localstorage,因此在此之前,遞增的項目不會保存到存儲中。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.