如何定义产品是否在购物篮中?

Question

请告诉我，我该如何为HTML CSS Javascript网站做到这一点。如果商品不在购物车中，然后显示文本"您的购物车是空的"。如果产品在购物车中，隐藏文本"您的购物车为空"。在Html中，有几个带有.buttons类的按钮，用户可以单击这些按钮并将产品添加到购物车中。购物车中还添加了类.basket__item的产品。使用.delete类删除购物车中的项目的按钮。最后是类. text_empty_cart的文本。我试着通过数组来做，但是什么也没发生。我尝试通过NodeList集合，但无效。

function Cart_check() {
const btns_array = [...document.querySelectorAll(".buttons")];
const cart_Items_array = [...document.querySelectorAll(".basket__item")];
var text_Empty_cart = document.querySelector(".text_Empty_cart");
for (var i = 0; i < btns_array.length; i++) {
btns_array.addEventListener("click", () => {
for (var j = 0; j < cart_Items_array.length; i++) {
if (cart_Items_array[j] > 0) {
text_Empty_cart.style.display = "none";
} else {
text_Empty_cart.style.display = "block";
}
}
});
}
}
Cart_check();

上面是我的一个努力。我很高兴得到任何帮助!

Answer 1

首先，也许你应该使用j++。

for (var j = 0; j < cart_Items_array.length; i++) {

第二，看起来脚本将重置可见性。也许你应该:

boolean hasItem = false;
for (var j = 0; j < cart_Items_array.length; j++) {
if (cart_Items_array[j] > 0) {
hasItem = true;
break;
}
}
if(hasItem)
text_Empty_cart.style.display = "none";
else 
text_Empty_cart.style.display = "block";

Answer 2

你还没有分享你的HTML，所以，目前我们只能猜测。

下面我一起列出了一个工作片段，它将使.empty__basketdiv在购物车中有元素时立即消失:

var i=0;
document.body.addEventListener("click",ev=>{
const el=ev.target;
if (!el.classList.contains("buttons")) return;

const btxt=el.textContent;
if(btxt=="add item"){
cart.insertAdjacentHTML("beforeend",
`<div class="basket__item">this is item ${++i} ... <button class="buttons">delete</button>`);
}
else if (btxt=="delete"){
el.closest("div").remove();
}
Cart_check();
});
const text_Empty_cart = document.querySelector(".text_Empty_cart"),
cart=document.querySelector("#cart");
function Cart_check() {
text_Empty_cart.style.display=document.querySelector(".basket__item")?"none":"";
}
Cart_check();

<button class="buttons">add item</button>
<div id="cart"></div>
<div class="text_Empty_cart">Your cart is currently empty.</div>

Cart_check()函数现在几乎变得微不足道:它只是检查.basket__item元素的存在并相应地设置.text_Empty_cart元素的可见性。