JS样式未覆盖CSS 滑动抽屉价格显隐失效排查

核心问题原因 #

• 执行时机错误：价格处理逻辑在页面初始加载时立刻运行，此时Dynamic Yield还未将抽屉内的推荐商品内容注入DOM，选择器拿不到抽屉里的.price-box元素，逻辑自然不会生效。预览环境DY注入时机早所以表现正常，正式环境DY脚本加载、渲染推荐内容存在延迟，就会出现逻辑运行但不生效的问题。
• 之前把价格逻辑放在抽屉功能代码前导致抽屉无法点击，是因为当时.dy-sliding-drawer-container元素还未渲染到DOM，取到的容器值为null，访问属性时直接抛出JS错误，后续的抽屉事件绑定代码根本没有执行。
• 所谓“内联样式未覆盖原有CSS规则”是误判，本质是JS根本没选中目标元素，没有给元素加上对应的内联样式。

修复后完整代码 #

把原有两段JS全部替换为以下代码即可：

(function() {
  document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.dy-sliding-drawer-container');
    if (!container) return;
    const handler = container.querySelector('.dy-sliding-handle');
    const itemsContainer = container.querySelector('.dy-sliding-items-container');
    const mq = window.matchMedia("(max-width: 599px)");

    // 价格样式处理逻辑
    function processPriceStyles() {
      const itemPrices = itemsContainer.querySelectorAll('.price-box');
      itemPrices.forEach(priceBox => {
        const discountEl = priceBox.querySelector(".dynamic-price");
        const regularEl = priceBox.querySelector(".regular-price");
        if (!discountEl || !regularEl) return;

        // 清洗价格字符串，移除非数字/小数点字符，避免格式问题导致解析错误
        const discountPrice = parseFloat(discountEl.textContent.replace(/[^\d.]/g, ''));
        const regularPrice = parseFloat(regularEl.textContent.replace(/[^\d.]/g, ''));

        // 重置旧样式，避免重复执行时样式冲突
        discountEl.style.display = '';
        regularEl.style.cssText = '';

        if (discountPrice === regularPrice) {
          discountEl.style.display = "none";
          regularEl.style.fontWeight = "700";
          if (mq.matches) {
            regularEl.style.fontSize = "16px";
            regularEl.style.paddingTop = "15px";
          } else {
            regularEl.style.fontSize = "20px";
          }
        } else {
          regularEl.style.textDecoration = "line-through";
          regularEl.style.paddingLeft = "10px";
        }
      })
    }

    // 抽屉展开/收起切换
    function toggleDrawer() {
      container.classList.toggle('dy-open');
      // 抽屉展开时延迟执行价格处理，兼容内容延迟加载场景
      if (container.classList.contains('dy-open')) {
        setTimeout(processPriceStyles, 50);
      }
    }

    handler.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      toggleDrawer();
    });

    // 监听容器内DOM变化，DY注入推荐商品完成后自动执行价格处理
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(mut => {
        if (mut.addedNodes.length > 0) {
          processPriceStyles();
        }
      })
    });
    observer.observe(itemsContainer, { childList: true, subtree: true });

    // 首次加载延迟执行一次，兼容初始默认展开的场景
    setTimeout(processPriceStyles, 100);
  })
})()

优化说明 #

• 所有逻辑放在DOMContentLoaded回调中执行，避免DOM未就绪时找不到元素报错
• 元素选择范围全部限定在抽屉容器内，不会误影响页面其他位置的价格组件
• 用MutationObserver监听推荐内容注入动作，内容渲染完成后立刻处理价格样式，不需要依赖固定延迟
• 每次执行价格逻辑前先重置旧的内联样式，避免多次触发时样式叠加错乱
• 增加空值判断，单个商品价格元素缺失不会导致整个脚本中断运行
• 替换原有className字符串操作为原生classList.toggleAPI，类名切换更可靠
• 价格解析前增加字符串清洗逻辑，避免价格后缀,-、空格、货币符号导致数值对比错误

内容的提问来源于stack exchange，提问作者R. Srour