如何在Google Optimize注入JS将超20的价格设为红色？代码故障排查

你的代码无法运行主要有三个原因，对应修复如下：

1. 类选择器使用错误 #

getElementsByClassName不支持直接传入带空格的类名（空格会被解析为后代选择逻辑），而你的目标元素是同时拥有mErEH和_223RA两个类的元素，正确的选择方式是用querySelectorAll，语法为.mErEH._223RA。

2. 价格比较逻辑错误 #

价格文本包含货币符号（如€），直接用innerHTML > 20属于字符串与数字的无效比较，必须先提取文本中的纯数字部分，转换为数值后再进行判断。

3. DOM执行时机问题 #

Google Optimize注入的代码可能在页面DOM元素尚未完全渲染时就执行了，导致无法找到目标元素，需要将代码包裹在DOM加载完成的回调中。

修正后的可运行代码 #

// 确保DOM完全加载后执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有目标价格元素
  const priceElements = document.querySelectorAll(".mErEH._223RA");
  
  // 遍历处理每个价格元素
  priceElements.forEach(element => {
    // 提取纯文本并去除多余空格
    const rawPrice = element.textContent.trim();
    // 过滤掉非数字和小数点的字符，提取价格数值
    const priceValue = parseFloat(rawPrice.replace(/[^0-9.]/g, ''));
    
    // 验证数值有效性并判断价格是否超过20
    if (!isNaN(priceValue) && priceValue > 20) {
      element.style.color = "#ff0000";
    }
  });
});

动态内容适配（可选） #

如果页面是滚动加载商品的动态页面，上述代码仅能处理初始加载的元素，此时需要用MutationObserver监听DOM变化，自动处理新出现的价格元素：

// 创建DOM变化监听器
const priceObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 当有新节点添加时，重新处理价格元素
    if (mutation.addedNodes.length > 0) {
      document.querySelectorAll(".mErEH._223RA").forEach(element => {
        const rawPrice = element.textContent.trim();
        const priceValue = parseFloat(rawPrice.replace(/[^0-9.]/g, ''));
        if (!isNaN(priceValue) && priceValue > 20) {
          element.style.color = "#ff0000";
        }
      });
    }
  });
});

// 启动监听（需替换为商品列表的父容器选择器，例如".商品列表类名"）
priceObserver.observe(document.querySelector("替换为实际父容器选择器"), {
  childList: true,
  subtree: true
});

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