JavaScript如何获取Shopify货币选择器带active类列表项的嵌套文本

API 探路者

2026-9-28

问题原因

你原来的代码存在两个核心错误：

document.querySelectorAll() 返回的是匹配所有条件的节点集合（NodeList），不是单个DOM元素，直接取.innerHTML自然返回undefined
选择器语法错误：逗号分隔的选择器逻辑是「匹配li 或类为currency-selector的元素或类为active的元素或 href以#开头的a标签」，完全没有命中你要的「currency-selector列表下带active类的li里面的a标签」这个目标元素

修复后代码

基础版本（仅初始加载显示选中货币）

<script>
// 等待DOM完全加载后再执行
document.addEventListener('DOMContentLoaded', function() {
  // 精准选中带active类的货币项内部的a标签
  const activeCurrencyEl = document.querySelector('.currency-selector li.active a');
  if (activeCurrencyEl) {
    // 去除文本前后的多余空白
    const currencyText = activeCurrencyEl.textContent.trim();
    document.getElementById('currName').textContent = currencyText;
  }
});
</script>

完整版本（支持切换货币后自动更新显示）

如果需要用户切换货币后同步更新显示，添加事件监听即可：

<script>
function updateCurrencyDisplay() {
  const activeCurrencyEl = document.querySelector('.currency-selector li.active a');
  if (activeCurrencyEl) {
    const currencyText = activeCurrencyEl.textContent.trim();
    document.getElementById('currName').textContent = currencyText;
  }
}

// 初始加载时执行
document.addEventListener('DOMContentLoaded', updateCurrencyDisplay);

// 监听货币选择点击事件，切换后更新
document.querySelectorAll('.currency-selector li a').forEach(item => {
  item.addEventListener('click', function() {
    // 等待Shopify自带的active类切换逻辑执行完成后再更新显示
    setTimeout(updateCurrencyDisplay, 100);
  });
});
</script>