点击产品按钮后弹窗始终显示最后一个产品详情的原因及解决方法

• 弹窗触发逻辑存在本质错误：原showpopup函数没有做弹窗的差异化匹配，用户点击任意按钮后，函数会循环遍历页面上所有.popup元素，把每一个弹窗的显示状态设置为display: block。由于所有弹窗都是固定定位、处于屏幕中心的同一坐标，DOM顺序靠后的元素会自然堆叠在更上层，最终序列最后一个产品的弹窗会盖住所有其他弹窗，最终表现为无论点击哪个产品按钮，视觉上都只显示最后一个产品的详情。
• HTML元素id不符合规范：HTML标准要求同一文档内的id属性必须全局唯一，但当前代码中所有产品触发按钮都复用id="showpopup"，所有详情弹窗都复用id="popup"，所有关闭按钮都复用id="hidepopup"，重复id会导致DOM定位逻辑混乱，无法建立按钮和弹窗的对应关系。
• 缺少触发来源和目标弹窗的关联链路：当前showpopup函数没有接收任何传入参数，完全无法识别用户点击的是哪个产品的按钮，自然不能精准定位匹配的弹窗内容。
• 状态管理未复用已有样式类：代码中预先定义了.popup-hide、.popup-show的状态切换类，但实际JS逻辑是直接修改内联display样式，没有走类切换的状态管理流程，进一步加剧了状态混乱。

• 规范HTML结构
  • 移除所有重复的id属性，给每个产品卡片和对应的详情弹窗添加匹配的自定义标识，通过data-product-index属性标记序号：第一个产品卡片和对应弹窗标记为data-product-index="0"，第二个标记为data-product-index="1"，建立按钮和弹窗的一一映射关系。
  • 调整按钮的点击触发逻辑，把当前按钮对应的产品序号传入showpopup函数，例如第一个产品按钮的触发代码为onclick="showpopup(0)"，第二个为onclick="showpopup(1)"。
• 重构弹窗状态控制逻辑
  • 打开弹窗前先做全局状态重置：遍历所有.popup元素，先将所有弹窗设为隐藏状态，从根源上避免多个弹窗同位置堆叠的问题。
  • 根据传入的产品序号精准定位目标弹窗，仅将这一个弹窗设置为显示状态，取消原逻辑里循环打开所有弹窗的错误写法。
  • 关闭弹窗时不需要全量遍历页面元素，直接定位当前点击的关闭按钮所属的弹窗元素，将其设为隐藏即可。
• 核心逻辑参考代码

  // 打开指定产品的弹窗
  function showpopup(targetIndex) {
      // 重置所有弹窗为隐藏状态
      const allPopups = document.querySelectorAll('.popup');
      allPopups.forEach(popup => {
          popup.classList.replace('popup-show', 'popup-hide');
      })
      // 找到匹配序号的弹窗并显示
      const targetPopup = document.querySelector(`.popup[data-product-index="${targetIndex}"]`);
      targetPopup.classList.replace('popup-hide', 'popup-show');
  }
  
  // 关闭当前打开的弹窗
  function hidepopup(e) {
      const currentPopup = e.target.closest('.popup');
      currentPopup.classList.replace('popup-show', 'popup-hide');
  }
  

• 兜底优化
  给弹窗元素增加明确的z-index分层规则，哪怕出现逻辑疏漏同时打开了多个弹窗，也能保证正确的弹窗处于最上层的显示位置。

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