我连续几天试图找到一个解决方案来隐藏整个部分，如果我的购物车是空的，只有当我在购物车中添加新商品时才显示。商店完全由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>
答案 0 :(得分：1)
要隐藏div，您需要修改displayCart（），如下所示。
function displayCart() {
var cartArray = shoppingCart.listCart();
console.log(cartArray);
var output = "";
var divEl = $("#show-cart").parent(); if(cartArray.length > 0) {
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>";
}
$(divEl).removeClass('hidden'); } else { $(divEl).addClass('hidden'); }
$("#show-cart").html(output);
$("#count-cart").html( shoppingCart.countCart() );
$("#total-cart").html( shoppingCart.totalCart() );
}
这样它将根据对象的大小显示或隐藏div。 尝试并发表评论。
PS：hidden是一个bootstrap类。您需要包含引导程序库。或者只是添加从库中获取的CSS，如果你不完全需要它。
.hidden {
display: none !important;
}
答案 1 :(得分：0)
你可以使用length购物车项目作为jQuery的{bo toggle()
let $cartList = $('#show-cart');
$cartList.parent().toggle( $cartList.children().length );