如何用JS根据商品页URL自动触发弹窗内对应面额礼品卡按钮点击？

问题场景 #

电商礼品卡商品页，购买需通过弹窗内的面额按钮表单完成，表单和商品页无关联。需求是：点击弹窗唤起按钮时，根据当前URL里的nominal-xxxx标识，自动点击弹窗内对应class的面额按钮，同步表单参数。

你已经实现了单个面额的逻辑，但扩展到多面额时数组写法出错，以下是修正后的实现方案：

你之前的错误点 #

1. 选择器生成错误：document.querySelectorAll(${fields})会把数组转成"nominal-3000,nominal-4000,nominal-5000"，这不是合法的CSS选择器，正确的应该是每个class前加.，并用逗号分隔。
2. NodeList判断错误：nominals.includes(ai)不成立，因为nominals是DOM元素集合（NodeList），不是字符串数组，不能直接判断是否包含字符串。
3. 变量名错误：你定义的是popupBtn，但用pb.addEventListener调用，会直接报错。

正确的数组实现代码 #

// 定义所有需要处理的面额class数组（不带.）
const nominalClasses = [
  'nominal-3000',
  'nominal-4000',
  'nominal-5000',
  // 这里继续添加剩下的7个面额
];

const popupBtn = document.querySelector('.popup-btn');

popupBtn.addEventListener('click', (e) => {
  e.preventDefault();
  // 打开弹窗
  document.body.classList.add('popup-open');

  // 生成合法的CSS选择器，比如".nominal-3000, .nominal-4000..."
  const selector = nominalClasses.map(cls => `.${cls}`).join(', ');
  // 获取所有面额按钮元素
  const allNominalBtns = document.querySelectorAll(selector);

  // 遍历面额数组，找到URL中包含的那个
  const matchedClass = nominalClasses.find(cls => window.location.href.includes(cls));

  if (matchedClass) {
    // 先移除所有按钮的active状态
    allNominalBtns.forEach(btn => btn.classList.remove('active-nominal'));
    // 找到匹配的按钮
    const targetBtn = document.querySelector(`.${matchedClass}`);
    if (targetBtn) {
      // 激活并点击按钮
      targetBtn.classList.add('active-nominal');
      targetBtn.click();
    }
  }
});

代码说明 #

• 用map把数组转成合法的CSS选择器，确保能正确获取所有面额按钮。
• 用find方法直接从数组中找到URL包含的面额class，逻辑更简洁。
• 先统一移除所有按钮的active状态，再给匹配的按钮添加状态并点击，避免多个按钮同时处于激活状态。

内容的提问来源于stack exchange，提问作者Лео