WordPress中实现基于ID关联的动态模态框点击触发功能

我正在WordPress里通过Feed实现动态模态弹窗：一个Feed展示可点击元素，另一个Feed存储模态弹窗内容。已经给两个父容器下的指定类元素添加了迭代ID，现在需要实现点击team-0就打开对应modal-0，以此类推的功能。

现有代码 #

自动生成ID的JavaScript代码 #

const modalContainer = document.getElementById('modalContainer');
const modal = modalContainer.querySelectorAll('.team');

modal.forEach((element, index) => {
  element.id = `modal-${index}`;
});

const teamContainer = document.getElementById('teamContainer');
const team = teamContainer.querySelectorAll('.team');

team.forEach((element, index) => {
  element.id = `team-${index}`;
});

HTML结构示例 #

<div id="teamContainer">
<ul>
<li id="team-0" class="team"></li>
<li id="team-1" class="team"></li>
<li id="team-2" class="team"></li>
</ul>
</div>

<div id="modalContainer">
<ul>
<li id="modal-0" class="team"></li>
<li id="modal-1" class="team"></li>
<li id="modal-2" class="team"></li>
</ul>
</div>

尝试的实现代码（存疑） #

window.onload = function(){ 
  for (let i = 0; i < 10; i++) {
    let teamId = `team-${i}`;
    let teamIndex = document.getElementById(teamId);

    let modalId = `modal-${i}`;
    let modalIndex = document.getElementById(modalId);

    teamIndex.onclick = function() {
      modalIndex.style.display = "block";
    }
  }
};

优化实现方案 #

你尝试的代码存在硬编码循环次数、未处理元素不存在场景的问题，这里提供更安全灵活的实现方式：

// DOM加载完成后执行，无需等待所有资源加载
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有可点击的team元素
  const teamItems = document.querySelectorAll('#teamContainer .team');
  
  teamItems.forEach((item, index) => {
    // 绑定点击事件
    item.addEventListener('click', function() {
      // 根据索引匹配对应模态框
      const targetModal = document.getElementById(`modal-${index}`);
      if (targetModal) {
        targetModal.style.display = 'block';
      }
    });
  });
});

补充说明 #

• 用DOMContentLoaded替代window.onload，DOM结构就绪就执行，响应更快
• 遍历现有team元素，适配Feed返回的任意数量内容，避免硬编码循环次数
• 增加模态框存在性判断，防止找不到元素时抛出错误
• 若需要关闭模态框，可给模态框添加关闭按钮，绑定点击事件将其style.display设为none

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