多按钮控制单个弹窗显隐逻辑实现，无需使用JS闭包的方案

核心问题分析 #

你当前代码无法实现场景2的核心原因是：control变量被定义在infoFunc函数内部，属于局部变量，每次触发按钮点击调用infoFunc时都会被重新初始化为固定值q1，根本无法持久化存储上一次点击的按钮值，自然没法做新旧点击值的对比判断。

实现方案 #

你完全不需要强制使用闭包，最简单的方案是用全局变量存储上一次点击的按钮值，逻辑好理解也能完全满足需求。如果担心全局变量污染，也可以选择闭包的封装方案。

方案1：全局变量实现（最简单易上手）

// 全局存储上一次点击的按钮值，初始为null代表未点击过任何按钮
let lastClickedValue = null;
// 此处保留你原本定义的questionDetails Map即可

function infoFunc(clicked_value) {
  // 直接用Map的has方法判断是否存在对应值，不需要循环遍历，性能更高
  if (questionDetails.has(clicked_value)) {
    const infoText = `<p>${questionDetails.get(clicked_value)}</p>`;
    document.getElementById("questioninfoDiv").innerHTML = infoText;
  }
  popupcontrolFunc(clicked_value);
}

function popupcontrolFunc(clicked_value) {
  const popup = document.getElementById("questioninfoDiv");
  // 判断当前点击按钮和上一次点击是否为同一个
  if (clicked_value === lastClickedValue) {
    // 同一个按钮：切换弹窗显示/隐藏状态
    popup.classList.toggle("show");
    // 如果弹窗变为隐藏状态，清空存储的上一次点击值
    if (!popup.classList.contains("show")) {
      lastClickedValue = null;
    }
  } else {
    // 不同按钮：强制弹窗显示，更新存储的上一次点击值
    popup.classList.add("show");
    lastClickedValue = clicked_value;
  }
}

HTML代码不需要做任何修改，和你原来的保持一致即可。

方案2：闭包实现（避免全局变量污染）

如果你不想引入全局变量，可以用闭包把状态封装在函数内部，逻辑和全局变量方案完全一致，只是状态不会暴露到全局作用域：

const infoFunc = (function() {
  // 闭包内部存储上一次点击的按钮值，外部无法访问
  let lastClickedValue = null;
  // 此处保留你原本定义的questionDetails Map即可

  return function(clicked_value) {
    if (questionDetails.has(clicked_value)) {
      const infoText = `<p>${questionDetails.get(clicked_value)}</p>`;
      document.getElementById("questioninfoDiv").innerHTML = infoText;
    }

    const popup = document.getElementById("questioninfoDiv");
    if (clicked_value === lastClickedValue) {
      popup.classList.toggle("show");
      if (!popup.classList.contains("show")) {
        lastClickedValue = null;
      }
    } else {
      popup.classList.add("show");
      lastClickedValue = clicked_value;
    }
  }
})();

逻辑验证 #

两种方案都完全覆盖你的两个交互场景：

• 场景1：页面初始化时lastClickedValue为null，第一次点击任意按钮，弹窗自动显示，存储当前点击值；再次点击同一个按钮，弹窗切换为隐藏，存储值清空。
• 场景2：弹窗显示状态下点击其他按钮，判断为不同点击值，弹窗保持显示，自动更新为对应按钮的内容。

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