0
如果我的購物車是空的，並且只有在購物車中添加新項目時才顯示，我試圖找到解決方案來隱藏整個板塊。商店完全用JavaScript和jQuery製作。 下面我會放下代碼，即使是一個小小的想法也不錯。如果爲空，請隱藏購物車
P.S：我需要隱藏div。
$(".add-to-cart").click(function(event){
event.preventDefault();
var name = $(this).attr("data-name");
var price = Number($(this).attr("data-price"));
shoppingCart.addItemToCart(name, price, 1);
displayCart();
});
$("#clear-cart").click(function(event){
shoppingCart.clearCart();
displayCart();
});
function displayCart() {
var cartArray = shoppingCart.listCart();
console.log(cartArray);
var output = "";
for (var i in cartArray) {
output += "<li>"
+cartArray[i].name
+" <input class='item-count' type='number' data-name='"
+cartArray[i].name
+"' value='"+cartArray[i].count+"' >"
+" x "+cartArray[i].price
+" = "+cartArray[i].total
+" <button class='plus-item' data-name='"
+cartArray[i].name+"'>+</button>"
+" <button class='subtract-item' data-name='"
+cartArray[i].name+"'>-</button>"
+" <button class='delete-item' data-name='"
+cartArray[i].name+"'>X</button>"
+"</li>";
}
$("#show-cart").html(output);
$("#count-cart").html(shoppingCart.countCart());
$("#total-cart").html(shoppingCart.totalCart());
}
$("#show-cart").on("click", ".delete-item", function(event){
var name = $(this).attr("data-name");
shoppingCart.removeItemFromCartAll(name);
displayCart();
});
$("#show-cart").on("click", ".subtract-item", function(event){
var name = $(this).attr("data-name");
shoppingCart.removeItemFromCart(name);
displayCart();
});
$("#show-cart").on("click", ".plus-item", function(event){
var name = $(this).attr("data-name");
shoppingCart.addItemToCart(name, 0, 1);
displayCart();
});
$("#show-cart").on("change", ".item-count", function(event){
var name = $(this).attr("data-name");
var count = Number($(this).val());
shoppingCart.setCountForItem(name, count);
displayCart();
});
displayCart();
// Shopping Cart functions
var shoppingCart = (function() {
// Private methods and properties
var cart = [];
function Item(name, price, count) {
this.name = name
this.price = price
this.count = count
}
function saveCart() {
localStorage.setItem("shoppingCart", JSON.stringify(cart));
}
function loadCart() {
cart = JSON.parse(localStorage.getItem("shoppingCart"));
if (cart === null) {
cart = []
}
}
loadCart();
// Public methods and properties
var obj = {};
obj.addItemToCart = function (name, price, count) {
for (var i in cart) {
if (cart[i].name === name) {
cart[i].count += count;
saveCart();
return;
}
}
console.log("addItemToCart:", name, price, count);
var item = new Item(name, price, count);
cart.push(item);
saveCart();
};
obj.setCountForItem = function (name, count) {
for (var i in cart) {
if (cart[i].name === name) {
cart[i].count = count;
break;
}
}
saveCart();
};
obj.removeItemFromCart = function (name) { // Removes one item
for (var i in cart) {
if (cart[i].name === name) { // "3" === 3 false
cart[i].count--; // cart[i].count --
if (cart[i].count === 0) {
cart.splice(i, 1);
}
break;
}
}
saveCart();
};
obj.removeItemFromCartAll = function (name) { // removes all item name
for (var i in cart) {
if (cart[i].name === name) {
cart.splice(i, 1);
break;
}
}
saveCart();
};
obj.clearCart = function() {
cart = [];
saveCart();
}
obj.countCart = function() { // -> return total count
var totalCount = 0;
for (var i in cart) {
totalCount += cart[i].count;
}
return totalCount;
};
obj.totalCart = function() { // -> return total cost
var totalCost = 0;
for (var i in cart) {
totalCost += cart[i].price * cart[i].count;
}
return totalCost.toFixed(2);
};
obj.listCart = function() { // -> array of Items
var cartCopy = [];
console.log("Listing cart");
console.log(cart);
for (var i in cart) {
console.log(i);
var item = cart[i];
var itemCopy = {};
for (var p in item) {
itemCopy[p] = item[p];
}
itemCopy.total = (item.price * item.count).toFixed(2);
cartCopy.push(itemCopy);
}
return cartCopy;
};
// ----------------------------
return obj;
})();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<button id="clear-cart">Clear Cart</button>
</div>
<div>
<ul id="show-cart">
<li>???????</li>
</ul>
<div>You have <span id="count-cart">X</span> items in your cart</div>
<div>Total Cart:$<span id="total-cart"></span></div>
</div>
謝謝，它的工作完美！你救了我：D –
不客氣。:-) –