如何用JavaScript获取不同尺码选中时对应的商品价格

问题根因 #

• MutationObserver监听配置不完整：仅开启了childList（子节点增删）监听，.productPrice元素修改自身文本内容的场景不会触发回调，需要额外开启characterData（字符内容变化）和subtree（监听后代节点变化）配置。
• 点击尺码时同步读取price.innerHTML，如果价格更新逻辑是异步的，读取操作会早于价格更新完成，拿到的还是上一次的旧值。
• insertAdjacentHTML使用afterbegin参数会不断往.newPrice头部追加内容，不会覆盖旧价格，导致页面始终显示第一次插入的€20。

修复方案 #

方案1：调整MutationObserver逻辑（保留监听DOM的实现方式） #

调整监听配置，把更新.newPrice的逻辑挪到监听回调中，确保价格更新完成后再读取最新值，同时改为替换内容而非追加：

// 缓存公共DOM元素
const targetNode = document.querySelector('.productDetails');
const priceEle = document.querySelector('.productPrice');
const newPriceEle = document.querySelector('.newPrice');
// 完善监听配置，覆盖文本修改场景
const observerConfig = { childList: true, characterData: true, subtree: true };

const observerCallback = (mutationsList) => {
  for (const mutation of mutationsList) {
    // 仅处理价格元素相关的变化
    if (mutation.target === priceEle || mutation.target.contains(priceEle)) {
      const latestPrice = priceEle.innerHTML.trim();
      console.log('当前尺码价格：', latestPrice);
      // 直接替换内容，避免追加旧值
      newPriceEle.innerHTML = latestPrice;
    }
  }
};

const priceObserver = new MutationObserver(observerCallback);
priceObserver.observe(targetNode, observerConfig);

// 尺码点击事件仅保留切换逻辑，价格同步交给监听自动处理
const sizeItems = document.querySelectorAll('.sizeContainer li');
sizeItems.forEach(el => {
  el.addEventListener('click', () => {
    // 此处保留你原有触发价格更新的业务逻辑即可
  });
});

方案2：轻量映射实现（无需监听DOM，性能更优） #

如果尺码定价是固定值，可直接在代码中维护尺码-价格映射关系，点击时直接取值更新，不需要监听DOM变化：

// 维护尺码和价格的映射关系
const sizePriceMap = {
  'Small': '€20',
  'Medium': '€30',
  'Large': '€40'
};
const priceEle = document.querySelector('.productPrice');
const newPriceEle = document.querySelector('.newPrice');

// 绑定尺码点击事件
document.querySelectorAll('.sizeContainer li').forEach(el => {
  el.addEventListener('click', function() {
    const currentSize = this.innerText.trim();
    const currentPrice = sizePriceMap[currentSize];
    // 同时更新两个价格展示位
    priceEle.innerHTML = currentPrice;
    newPriceEle.innerHTML = currentPrice;
  });
});

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