如何通过JavaScript根据带货币符号的总价字符串控制结账按钮显隐

原有代码问题说明 #

• 未处理元素加载和更新时机，总价元素还没渲染完成就读取内容，会拿到空值、未更新的中间值，这是识别到69等异常数值的核心原因
• 直接做完整字符串匹配，一旦总价内容前后存在空格、换行符就会匹配失败
• 只写了隐藏逻辑，没有补充符合条件时的显示逻辑，导致按钮状态错乱
• 直接选中页面所有button元素，容易误操作其他非结账按钮

修复后完整代码 #

// 防抖函数，避免频繁更新导致按钮闪烁
function debounce(func, wait) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), wait);
  }
}

function toggleCheckoutButton() {
  // 校验必要元素是否存在，避免报错
  const totalElement = document.querySelector(".wapf-grand-total");
  // 可替换为你站点实际的结账按钮选择器，匹配更精准
  const checkoutButton = document.querySelector("button.single_add_to_cart_button");
  if (!totalElement || !checkoutButton) return;

  // 提取纯数字做判断，过滤空格、货币符号等干扰内容
  const totalText = totalElement.innerText.trim();
  const totalAmount = parseFloat(totalText.replace(/[^0-9.]/g, ''));

  // 总价等于260时显示按钮，否则隐藏
  checkoutButton.style.display = totalAmount === 260 ? "inline-block" : "none";
}

// 页面加载完成后先执行一次校验
window.addEventListener("load", toggleCheckoutButton);

// 监听总价元素的内容变动，自动触发校验
const totalContainer = document.querySelector(".wapf-grand-total")?.parentElement;
if (totalContainer) {
  const observer = new MutationObserver(debounce(toggleCheckoutButton, 300));
  observer.observe(totalContainer, {
    childList: true,
    subtree: true,
    characterData: true
  });
}

优化说明 #

1. 增加元素存在性判断，避免元素未加载完成时抛出异常
2. 改为提取纯数值做判断，不再依赖完整字符串匹配，消除空格、特殊符号带来的匹配失败问题
3. 同时补充显示和隐藏逻辑，保证按钮状态正确
4. 通过MutationObserver监听总价元素变动，只要总价更新就自动触发校验，无需额外绑定商品选项的点击事件
5. 增加防抖逻辑，避免短时间内多次触发更新导致的按钮闪烁问题

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