页面显示指定配送文本时隐藏结账按钮的JS代码不生效问题

你代码的问题主要有三点：

• 字符串比较逻辑错误：你代码中使用>=运算符对比字符串，该运算符是按照字符Unicode编码值大小逐位比较，和你需要的「判断文本是否包含指定内容」的需求完全不符。同时你获取的td节点文本后还拼接了地址信息，不可能和目标字符串完全相等，应该用includes()方法判断文本是否包含目标片段。
• 文本存在空白干扰：你直接获取的innerText会保留标签内的换行、空格等空白字符，直接判断可能匹配失败，建议先调用trim()去除首尾空白。
• 可能存在执行时机问题：如果配送方式信息是页面加载完成后、用户修改收货地址后动态渲染的，需要保证函数在对应DOM更新后触发，否则判断时目标节点还没加载完成，逻辑不会生效。

修正后完整代码 #

function hideCheckoutBtn() {
  // 先判断运费节点是否存在，避免下标越界报错
  const shippingTd = document.querySelector(".shipping td");
  if (!shippingTd) return;

  const shippingText = shippingTd.innerText.trim();
  if (shippingText.includes("No shipping options found for")) {
    // 匹配到无配送方式文本时隐藏结账按钮
    document.querySelectorAll(".proceed-to-checkout").forEach(el => {
      el.style.display = "none";
    });
  } else {
    // 可选逻辑：有配送方式时恢复按钮显示
    document.querySelectorAll(".proceed-to-checkout").forEach(el => {
      el.style.display = "block";
    });
  }
}

// 页面初始加载完成后执行一次
document.addEventListener("DOMContentLoaded", hideCheckoutBtn);

// 如果配送方式是动态更新的，添加监听器自动触发判断
const observer = new MutationObserver(hideCheckoutBtn);
const shippingRow = document.querySelector(".shipping");
if (shippingRow) {
  observer.observe(shippingRow, {
    childList: true,
    subtree: true,
    characterData: true
  });
}

验证方法 #

打开浏览器开发者工具控制台，手动执行hideCheckoutBtn()看按钮是否隐藏，即可快速定位是判断逻辑问题还是函数没有触发的问题。

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