基于用户按钮选择展示对应弹窗的技术问题排查

问题根源 #

• 推荐按钮直接绑定了两个弹窗打开函数，导致点击时同时弹出两个弹窗
• 未存储用户选择的CPU/GPU信息，无法建立选择与弹窗的对应关系
• 弹窗内容固定，无法根据用户选择动态匹配

修复实现步骤 #

1. 存储用户选择的组件信息 #

在JS代码开头添加变量记录用户选择，同时修改按钮点击事件保存选中项：

// 存储用户选择的CPU和GPU
let selectedCPU = '';
let selectedGPU = '';

// CPU按钮事件：记录选中项
const mainbtnEL_1 = document.querySelectorAll(".btn__001");
mainbtnEL_1.forEach(btnEl => {
  btnEl.addEventListener("click", () => {
    document.querySelector('.special__1')?.classList.remove('special__1');
    btnEl.classList.add('special__1');
    selectedCPU = btnEl.id;
  });
});

// GPU按钮事件：记录选中项
const mainbtnEL_2 = document.querySelectorAll(".btn__002");
mainbtnEL_2.forEach(btnEl => {
  btnEl.addEventListener("click", () => {
    document.querySelector('.special__2')?.classList.remove('special__2');
    btnEl.classList.add('special__2');
    selectedGPU = btnEl.id;
  });
});

2. 重构弹窗控制逻辑 #

修复弹窗元素未定义的问题，添加统一的弹窗关闭函数，避免多弹窗同时显示：

// 获取弹窗元素
const popup = document.getElementById("popup");
const popup__2 = document.getElementById("popup__2");

// 关闭所有弹窗
function closeAllPopups() {
  popup.classList.remove('open-Popup');
  popup__2.classList.remove('open-Popup');
}

// 打开第一个弹窗
function open__Popup() {
  closeAllPopups();
  popup.classList.add('open-Popup');
}

// 打开第二个弹窗
function open__Popup2() {
  closeAllPopups();
  popup__2.classList.add('open-Popup');
}

3. 添加推荐按钮的匹配逻辑 #

创建处理函数，根据用户选择的CPU/GPU组合判断显示对应弹窗：

// 处理推荐按钮点击
function handleRecommend() {
  closeAllPopups();
  
  // 根据选择组合匹配弹窗
  if (selectedCPU === 'AMD' && selectedGPU === 'RTX3060') {
    open__Popup();
  } else if (selectedCPU === 'Intel' && selectedGPU === 'RTX3050') {
    open__Popup2();
  } else {
    alert("暂无对应推荐组合，请重新选择");
  }
}

4. 修改HTML按钮绑定 #

更新推荐按钮的点击事件，绑定新的处理函数：

<button type="submit" class="popup__btn" id="recommended" onclick="handleRecommend()">Recommended</button>

可选优化：动态更新弹窗内容 #

如果需要支持更多组件组合，建议保留单个弹窗，动态修改内容而非创建多个弹窗：

// 动态更新弹窗表格内容
function updatePopupContent(cpu, gpu) {
  document.querySelector('#tb_1 tr:nth-child(1) td:last-child').textContent = cpu;
  document.querySelector('#tb_1 tr:nth-child(2) td:last-child').textContent = gpu;
}

// 修改推荐处理函数
function handleRecommend() {
  closeAllPopups();
  if (selectedCPU && selectedGPU) {
    updatePopupContent(selectedCPU, selectedGPU);
    open__Popup();
  } else {
    alert("请先选择CPU和GPU");
  }
}

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