如何在清空购物车商品后隐藏「继续支付」按钮？

问题背景 #

结账页面已实现购物车商品展示功能，页面刷新时会调用clearCartItems函数清空购物车，但需要在清空购物车后隐藏「继续支付」按钮（无商品时禁止跳转至支付页）。

解决方案 #

1. 完善清空购物车函数 #

修改clearCartItems函数，在清空本地存储后，同步清空购物车DOM内容、重置金额显示，并隐藏支付按钮。

2. 初始化页面时判断购物车状态 #

页面加载时，执行清空逻辑后，检查本地存储是否有购物车商品：有则渲染商品并显示支付按钮，无则保持按钮隐藏状态。

3. 绑定「Clear Items」按钮点击事件 #

给页面上的「Clear Items」按钮添加点击事件，触发清空购物车和隐藏按钮的操作。

修改后的完整代码 #

JavaScript 代码 #

const cartItemsDiv = document.querySelector(".cart-items");
const buyBtn = document.querySelector("#buy-btn");
const subtotalElement = document.querySelector("#subtotal");
const totalElement = document.querySelector("#total");
let subtotal = 0;

function clearCartItems() {
  // 清空本地存储
  localStorage.removeItem("selectedItems");
  // 清空购物车DOM内容
  cartItemsDiv.innerHTML = "";
  // 重置小计和总计显示
  subtotal = 0;
  subtotalElement.textContent = "$0.00";
  totalElement.textContent = "$0.00";
  // 隐藏支付按钮
  buyBtn.classList.remove("non-active");
}

// 页面加载时执行初始化逻辑
window.onload = function() {
  clearCartItems();
  const storedCartItem = localStorage.getItem("selectedItems");
  if (storedCartItem) {
    renderCartItems(JSON.parse(storedCartItem));
    // 显示支付按钮
    buyBtn.classList.add("non-active");
  }
};

// 渲染购物车商品的独立函数
function renderCartItems(cartItem) {
  subtotal = 0;
  for (let i = 0; i < cartItem.length; i++) {
    const cartItemElement = document.createElement("div");
    cartItemElement.innerHTML = `
      <h3>${cartItem[i].title}</h3>  
      <p>Price: ${cartItem[i].price}</p>
      <p>License: ${cartItem[i].license}</p>
      <img src="${cartItem[i].image}" width='30%'/><br>
      <audio controls style="width:50%;">
        <source src="${cartItem[i].audio}" type="audio/mp3"> 
      </audio>
    `;
    cartItemsDiv.appendChild(cartItemElement);

    // 计算小计金额
    const price = Number(cartItem[i].price.replace("$", ""));
    subtotal += price;
  }

  // 更新金额显示
  subtotalElement.textContent = `$${subtotal.toFixed(2)}`;
  totalElement.textContent = `$${subtotal.toFixed(2)}`;
  const totalPriceInput = document.querySelector("#total_price");
  if (totalPriceInput) {
    totalPriceInput.value = subtotal.toFixed(2);
  }
}

// 绑定清空按钮点击事件
document.querySelector("#cart-items button").addEventListener("click", clearCartItems);

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Checkout</title>
</head>
<body>
  <h2 style="text-align:center;">Checkout</h2>
  <div id="cart-items">
    <p style="text-align:center;">YOU ADDED THESE PRODUCTS</p>
    <hr />
    <div class="product-container">
      <div class="cart-items"></div>
    </div>
    <button>Clear Items</button>
  </div>

  <div class="total">
    <h3 style="text-align:center;">Subtotal: <br><span id="subtotal">$0.00</span></h3>
    <h3 style="text-align:center;">Total: <br><span id="total">$0.00</span></h3>
    <a href="http://localhost:4242">
      <button style="background-color: rgb(29, 4, 216);" id="buy-btn">Continue to payment</button>
    </a>
    <a>
      <button style="background-color: rgb(216, 4, 4);">Cancel</button>
    </a>
  </div>
</body>
</html>

CSS 代码 #

/* 购物车容器样式 */
#cart-items {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* 商品详情容器样式 */
.product-details {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  width: 100%;
}

.product-details img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.product-details h3:first-child {
  margin-top: 0;
}

/* 总计金额样式 */
#total {
  font-weight: bold;
  font-size: 20px;
  margin-top: 20px;
  text-align: center;
}

/* 通用按钮样式 */
button {
  background-color: #4c5baf;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 0 auto;
  margin-top: 20px;
  cursor: pointer;
}

/* 支付按钮默认隐藏，添加类后显示 */
#buy-btn {
  background-color: rgb(29, 4, 216);
  display: none;
}

#buy-btn.non-active {
  display: block;
}

button:hover {
  opacity: 0.8;
}

#audio {
  display: block;
  margin: 0 auto;
  text-align: center;
  padding-top: 10px;
}

/* 修复移动端滚动问题 */
body {
  overflow-x: hidden;
}

关键说明 #

• clearCartItems函数同步处理本地存储、DOM内容、金额显示和按钮状态，确保状态统一
• 页面初始化时自动检查购物车状态，实现商品存在时显示支付按钮、无商品时隐藏的逻辑
• 「Clear Items」按钮绑定点击事件，点击后立即触发完整的清空流程

内容的提问来源于stack exchange，提问作者Danijel Krnic