如何判断商品是否在购物车？HTML/CSS/JS实现方案求助

原代码的问题分析 #

• 点击事件绑定错误：遍历按钮数组时，错误地给数组本身绑定事件，应给数组内每个按钮元素单独绑定
• 购物车项数据未实时更新：初始获取的cart_Items_array是静态集合，后续添加/删除商品后不会自动更新，导致判断逻辑失效
• 内层循环逻辑错误：循环变量写错（i++应为j++），且完全无需内层循环，直接判断购物车项数量即可
• 缺少删除按钮的事件监听：删除商品后不会触发空状态文本的更新
• 未初始化状态：页面加载时未执行状态判断，初始显示状态可能不符合实际购物车情况

正确实现方案 #

核心思路是封装通用的状态判断函数，在页面初始化、添加商品、删除商品三个时机调用该函数：

// 封装购物车空状态判断函数
function updateCartEmptyState() {
  const cartItems = document.querySelectorAll(".basket__item");
  const emptyText = document.querySelector(".text_Empty_cart");
  
  // 根据购物车项数量控制文本显示
  emptyText.style.display = cartItems.length > 0 ? "none" : "block";
}

// 页面加载完成后立即执行，设置初始状态
updateCartEmptyState();

// 给所有添加按钮绑定点击事件
const addButtons = document.querySelectorAll(".buttons");
addButtons.forEach(btn => {
  btn.addEventListener("click", () => {
    // 若添加商品是异步操作（如接口请求），需在商品DOM创建完成后再调用此函数
    updateCartEmptyState();
  });
});

// 给所有删除按钮绑定点击事件
const deleteButtons = document.querySelectorAll(".delete");
deleteButtons.forEach(btn => {
  btn.addEventListener("click", () => {
    // 若删除商品是异步操作，需在商品DOM移除完成后再调用此函数
    updateCartEmptyState();
  });
});

动态元素适配（可选） #

如果添加/删除商品时会动态创建/移除按钮或购物车项，建议使用事件委托，避免后续新增的按钮无法触发事件：

// 事件委托：监听全局点击事件，判断触发元素类型
document.addEventListener("click", (e) => {
  const target = e.target;
  // 判断点击的是添加按钮或其内部元素
  if (target.classList.contains("buttons") || target.closest(".buttons")) {
    updateCartEmptyState();
  } 
  // 判断点击的是删除按钮或其内部元素
  else if (target.classList.contains("delete") || target.closest(".delete")) {
    updateCartEmptyState();
  }
});

内容的提问来源于stack exchange，提问作者I'm good