相似Hover弹窗函数部分失效，如何合并为单个代码段？

你当前的问题在于重复绑定了多次DOMContentLoaded事件，且每个事件单独处理一个元素ID，这种写法不仅冗余，还可能导致后续元素的事件绑定逻辑异常。我们可以通过统一配置映射的方式，把所有逻辑合并到单个代码段里，同时保证每次仅显示一个弹窗。

合并后的完整代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 配置触发元素与对应弹窗ID的映射关系
  const popupConfigs = [
    { triggerSelector: '#Mitarbeiter1Punkt', popupId: '647' },
    { triggerSelector: '#Mitarbeiter2Punkt', popupId: '656' },
    { triggerSelector: '#Mitarbeiter3Punkt', popupId: 'xxx' }, // 替换为第3个弹窗ID
    { triggerSelector: '#Mitarbeiter4Punkt', popupId: 'xxx' }, // 替换为第4个弹窗ID
    { triggerSelector: '#Mitarbeiter5Punkt', popupId: 'xxx' }, // 替换为第5个弹窗ID
    { triggerSelector: '#Mitarbeiter6Punkt', popupId: 'xxx' }  // 替换为第6个弹窗ID
  ];

  popupConfigs.forEach(config => {
    const elements = document.querySelectorAll(config.triggerSelector);
    elements.forEach(el => {
      // 鼠标悬停显示对应弹窗
      el.addEventListener('mouseenter', function() {
        // 可选：先关闭所有已打开的弹窗，确保每次只显示一个
        // elementorProFrontend.modules.popup.closeAll();
        elementorProFrontend.modules.popup.showPopup({ id: config.popupId });
      });

      // 鼠标离开关闭弹窗
      el.addEventListener('mouseleave', function() {
        jQuery('body').click();
      });
    });
  });
});

代码说明 #

• 用popupConfigs数组统一管理所有触发元素和弹窗ID的对应关系，后续新增或修改只需调整这个数组，无需重复写绑定逻辑
• 仅绑定一次DOMContentLoaded事件，避免重复执行导致的逻辑冲突
• 可选的closeAll()方法：如果原有的jQuery('body').click()关闭弹窗的方式不够可靠，可以用Elementor官方提供的closeAll()方法提前关闭所有弹窗，确保新弹窗显示时没有旧弹窗残留
• 遍历配置数组时，为每个触发元素绑定鼠标进入/离开事件，逻辑统一且易维护

内容的提问来源于stack exchange，提问作者oli venöl