Question

我有产品和购物车。每个产品都有一个“添加到购物车”按钮，当您单击它时，它会将产品添加到购物车，按钮的内部文本将是“在购物车中”并且该按钮将被禁用。我的问题是，在我从购物车中移除产品或清除产品后，我不知道如何启用按钮并将内部文本改回“添加到购物车”。

这是添加产品的JS：

let addBtns = document.getElementsByClassName("bag-btn");
for (let i = 0; i < addBtns.length; i++) {
  const btn = addBtns[i];
  btn.addEventListener("click", addToCart);
}

function addToCart(e) {
  const button = e.target;
  button.innerText = "In Cart";
  button.disabled = true;
  const title = button.parentElement.nextElementSibling.textContent;
  const price =
    button.parentElement.nextElementSibling.nextElementSibling.children[0]
      .textContent;
  const img = button.parentElement.children[0].src;
  addItemToCart(title, price, img);
}

function addItemToCart(title, price, img) {
  const newRow = document.createElement("div");
  newRow.classList.add("cart-item");
  newRow.innerHTML = `
  <img src="${img}" alt="product" srcset="" />
  <div>
  <h4>${title}</h4>
  <h5>${price}</h5>
  <span class="remove-item">Remove</span>
  </div>
  <div>
  <i class="fas fa-chevron-up"></i>
  <p class="item-amount">1</p>
  <i class="fas fa-chevron-down"></i>
  </div>`;
  cartContent.append(newRow);
}

这是删除产品功能：

cartContent.addEventListener("click", (e) => {
  if (e.target.classList.contains("remove-item")) {
    let removeItem = e.target;
    cartContent.removeChild(removeItem.parentElement.parentElement);

那么，从购物车中取出产品后，如何将按钮文本和功能恢复正常？任何帮助将不胜感激。

Answer 1

为什么您对添加的委托与对删除的委托不同？

我没有你的 HTML，但是类似这样的东西

cartContent.addEventListener("click", (e) => {
  const tgt = e.target;
  if (tgt.classList.contains("remove-item")) {
     tgt.closest("whatever container").remove();
     tgt.closest("whatever container has button").querySelector(".bag-btn").textContent="Add to cart";
  }
  else if (e.target.classList.contains("bag-btn")) addToCart(tgt)
 })

并且有

function addToCart(button) {
  // const button = e.target;

所有那些parentElement.nextElementSibling.nextElementSibling.children[0]都很可怕

改为使用 button.closest("whatever container").querySelector("some selector")

添加到购物车按钮功能

1 个答案: