Semantic-UI技术问题：如何从弹出触发元素向弹出内容传参？

我懂你现在的需求——当点击弹出框里的「Click me」按钮时，想要拿到当初触发这个弹出框的那个按钮（比如「Show popup 1」或「Show popup 2」），你目前用了一个非全局的source_element临时存这个源元素来解决，其实我们可以用更优雅、更可靠的方式来实现，不用依赖临时变量~

先把你给出的HTML代码贴出来方便参考：

<button id="show-popup-btn1" class="ui green button"> Show popup 1 </button>
<button id="show-popup-btn2" class="ui red button"> Show popup 2 </button>
<div class="ui popup">
  <button id="click-me-button" class="ui blue button"> Click me </button>
  <!-- 其他弹出框内容 -->
</div>

方案1：用自定义属性关联源元素 #

这种方法简单直接，在触发弹出框的时候，把当前点击的按钮ID存在弹出框的自定义属性里，后续点击「Click me」时再通过ID找回源元素：

// 给所有弹出触发按钮绑定点击事件
document.querySelectorAll('[id^="show-popup-btn"]').forEach(btn => {
  btn.addEventListener('click', function() {
    const popup = document.querySelector('.ui.popup');
    // 把当前按钮的ID存到弹出框的data属性里
    popup.dataset.sourceBtnId = this.id;
    // 这里写上你显示弹出框的逻辑，比如：
    // popup.style.display = 'block';
  });
});

// 给弹出框里的「Click me」绑定点击事件
document.getElementById('click-me-button').addEventListener('click', function() {
  const popup = this.closest('.ui.popup');
  const sourceBtnId = popup.dataset.sourceBtnId;
  const sourceElement = document.getElementById(sourceBtnId);
  
  // 现在你就可以自由操作源元素了，比如打印它的文本
  console.log('触发弹出框的按钮：', sourceElement.textContent.trim());
});

方案2：利用闭包保存源元素（更安全） #

如果不想依赖DOM属性，闭包是个更稳妥的选择——每个触发按钮的点击事件里，给「Click me」绑定专属的回调函数，直接把当前按钮作为闭包变量保存：

const popupBtn = document.getElementById('click-me-button');
const popup = document.querySelector('.ui.popup');

document.querySelectorAll('[id^="show-popup-btn"]').forEach(btn => {
  btn.addEventListener('click', function() {
    // 先移除之前的事件监听，避免重复绑定导致逻辑混乱
    popupBtn.removeEventListener('click', handlePopupClick);
    
    // 定义带当前按钮的回调函数
    function handlePopupClick() {
      console.log('触发弹出框的按钮：', btn.textContent.trim());
      // 这里写「Click me」按钮的业务逻辑
    }
    
    // 绑定新的事件监听
    popupBtn.addEventListener('click', handlePopupClick);
    // 显示弹出框
    // popup.style.display = 'block';
  });
});

为什么不推荐临时变量？ #

你用的临时source_element虽然能解决问题，但如果作用域控制不好，很容易被其他代码意外覆盖，尤其是在多弹出框、频繁触发的场景下容易出bug。上面的两种方法都是把源元素和弹出框的触发逻辑紧密绑定，逻辑更清晰，也更易维护。

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