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

dz6r00yl 于 2022-12-30 发布在其他

关注(0)|答案(2)|浏览(120)

请告诉我，我怎么做的HTML CSS Javascript网站。如果产品不在购物车中，然后显示一个文本“您的车是空的”。如果产品在购物车中，隐藏文本“你的购物车是空的".在Html中有几个带有class . button的按钮，用户点击这些按钮并将产品添加到购物车中.购物车中也有带有class的已添加产品. basket__item.用来删除cart中的项目的按钮类. 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();

这是我的一项努力。我很高兴得到任何帮助！

css

来源：https://stackoverflow.com/questions/74959254/how-can-i-define-if-a-product-is-in-a-basket

2条答案

按热度按时间

wixjitnu1#

首先，也许您应该使用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";

赞(0）回复(0）举报 2022-12-30

4nkexdtk2#

你还没有分享你的HTML，所以，目前我们只能猜测。
下面我给出了一个工作片段，它将使.empty__basket div在购物车中有元素时立即消失：

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元素的可见性。

赞(0）回复(0）举报 2022-12-30

我来回答

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

2条答案

相关问题

热门标签

最新问答