点击多链接触发对应元素显隐的JavaScript实现问题

需求说明 #

点击5个触发链接时，展示对应关联的元素，触发后显示的元素本身支持点击跳转。

原有问题代码 #

HTML 触发链接部分 #

<a class="toggler1" href="#!">
  <h1 class="website-titles">A boring website</h1>
</a>
<a class="toggler2" href="#!">
  <h1 class="website-titles">Unoriginal.co.uk</h1>
</a>

HTML 待显示弹窗部分 #

<a class="mydiv1" href="main.html">
  <div class="pop-up-1">
    <img
      class="mydiv1-bg"
      src="images/pink-pop-up.png"
      alt="pink pop up"
    />
    <img
      class="mydiv1-gif"
      src="images/spinning-star.gif"
      alt="animated star gif"
    />
  </div>
</a>
<a class="mydiv2" href="main.html">
  <div class="pop-up-2">
    <img
      class="mydiv2-bg"
      src="images/black-pop-up.png"
      alt="black pop up"
    />
    <img
      class="mydiv2-gif"
      src="images/stars.gif"
      alt="animated star background"
    />
    <h1 class="mydiv2-text">
      CLICK HERE TO RE-INVIGORATE YOUR WEB SURFING EXPERIENCE!!!
    </h1>
  </div>
</a>

原有失效JS代码 #

<script>
  var elementToClick = document.querySelector(".toggler1");
  var elementToShow = document.querySelector(".mydiv1");

  if (elementToClick) {
    elementToClick.addEventListener("click", showElement);
  }

  function showElement() {
    elementToShow.classList.add("show");
  }
</script>
<script>
  var elementToClick = document.querySelector(".toggler2");
  var elementToShow = document.querySelector(".mydiv1");

  if (elementToClick) {
    elementToClick.addEventListener("click", showElement);
  }

  function showElement() {
    elementToShow.classList.add("show");
  }
</script>

原有CSS代码 #

/* POP UP 1 */
.mydiv1 {
  display: none;
}
.mydiv1.show {
  display: block;
}

/* POP UP 2 */
.mydiv2 {
  display: none;
}
.mydiv2.show {
  display: block;
}

失效原因 #

1. 多个script标签中重复声明同名函数showElement和同名变量，后续声明会覆盖前面的内容，导致所有点击事件最终只会操作最后一次定义的目标元素
2. 硬编码类名、复制重复逻辑的写法冗余度极高，后续扩展和修改成本高，很容易出现写错选择器的低级错误

优化后实现方案 #

第一步：简化HTML结构 #

给所有触发链接统一加公共类toggler，通过data-target属性绑定对应要显示的弹窗选择器，不用再给每个触发链接单独写带数字的类名：

<a class="toggler" href="#!" data-target=".mydiv1">
  <h1 class="website-titles">A boring website</h1>
</a>
<a class="toggler" href="#!" data-target=".mydiv2">
  <h1 class="website-titles">Unoriginal.co.uk</h1>
</a>
<!-- 剩余3个触发链接按相同规则添加即可，data-target属性值填对应弹窗的选择器 -->

给所有弹窗元素统一加公共类popup-link，原有带数字的类名可以保留不影响其他样式：

<a class="mydiv1 popup-link" href="main.html">
  <!-- 内部内容不变 -->
</a>
<a class="mydiv2 popup-link" href="main.html">
  <!-- 内部内容不变 -->
</a>

第二步：简化CSS代码 #

把重复的显示隐藏规则合并，不用给每个弹窗单独写样式：

/* 所有弹窗默认隐藏 */
.popup-link {
  display: none;
}
/* 加show类时显示 */
.popup-link.show {
  display: block;
}

第三步：只写一份JS逻辑即可 #

删除原来复制的多份script标签，替换为以下代码：

// 获取所有触发链接
const togglerList = document.querySelectorAll('.toggler');

togglerList.forEach(toggler => {
  toggler.addEventListener('click', function(e) {
    // 阻止a标签默认的#跳转行为
    e.preventDefault();
    // 拿到当前触发链接绑定的目标弹窗选择器
    const targetSelector = this.dataset.target;
    const targetPopup = document.querySelector(targetSelector);
    if (!targetPopup) return;

    // ---如果需要点击新链接时隐藏之前打开的弹窗，就保留下面这行，不需要可以删除---
    document.querySelectorAll('.popup-link.show').forEach(openPopup => openPopup.classList.remove('show'));
    
    // 显示对应弹窗
    targetPopup.classList.add('show');
  })
})

方案说明 #

• 所有逻辑只需要写一次，后续新增触发链接和弹窗时，只需要在HTML里按规则加data-target属性即可，不需要修改JS和CSS代码
• 弹窗本身用a标签包裹的写法完全保留，原生支持点击跳转，符合需求
• 不存在变量、函数重名覆盖的问题，不会出现只有单个元素生效的情况
• 如果需要加点击弹窗外部关闭、点击弹窗跳转后自动关闭等功能，直接在现有JS基础上扩展即可

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