Jekyll/Liquid循环内嵌Script模态框显示异常求助

核心问题分析 #

你遇到的两个问题本质上是循环内嵌入重复脚本导致的作用域冲突，以及冗余脚本的执行阻塞/覆盖：

1. 所有模态框显示第一个member.bio：循环内的<script>如果重复定义相同的函数/变量，会因为全局作用域的变量提升或函数覆盖，导致所有事件处理逻辑最终指向同一个（第一个）循环变量的值。
2. 第二个循环的<script>未执行：大概率是第一个循环的脚本存在语法错误（比如未闭合的字符串、括号），导致浏览器JS引擎中断后续脚本执行；或者两个循环的脚本定义了同名函数，浏览器直接忽略了后续重复定义。

最优解决方案：移除循环内脚本，改用统一事件绑定 #

不要在循环里嵌入<script>，而是通过HTML data属性存储每个成员的生物信息，再用一个统一的脚本绑定所有点击事件，既避免作用域问题，又提升性能。

步骤1：修改循环渲染的HTML结构

不管是第一个还是第二个循环，都按以下方式渲染图片和模态框，用data-*属性存储关键数据：

{% for member in group1 %}
  <!-- 图片：用data属性绑定对应模态框ID和生物信息 -->
  <img 
    id="img-{{ member.id }}" 
    src="{{ member.img }}" 
    class="member-img"
    data-modal-target="#modal-{{ member.id }}"
    data-bio="{{ member.bio }}"
  >
  <!-- 模态框：留空内容容器，后续通过JS填充 -->
  <div id="modal-{{ member.id }}" class="modal">
    <div class="modal-content">
      <span class="close-btn">&times;</span>
      <div class="bio-container"></div>
    </div>
  </div>
{% endfor %}

{% for member in group2 %}
  <!-- 第二个循环完全复用相同结构 -->
  <img 
    id="img-{{ member.id }}" 
    src="{{ member.img }}" 
    class="member-img"
    data-modal-target="#modal-{{ member.id }}"
    data-bio="{{ member.bio }}"
  >
  <div id="modal-{{ member.id }}" class="modal">
    <div class="modal-content">
      <span class="close-btn">&times;</span>
      <div class="bio-container"></div>
    </div>
  </div>
{% endfor %}

步骤2：添加统一的事件绑定脚本

把这段脚本放在页面底部（</body>标签前），一次性处理所有图片点击和模态框关闭逻辑：

// 绑定所有成员图片的点击事件
document.querySelectorAll('.member-img').forEach(img => {
  img.addEventListener('click', function() {
    // 从data属性获取目标模态框和生物信息
    const modal = document.querySelector(this.dataset.modalTarget);
    const bioContent = modal.querySelector('.bio-container');
    
    // 填充生物信息并显示模态框
    bioContent.textContent = this.dataset.bio;
    modal.style.display = 'block';
  });
});

// 绑定所有关闭按钮的点击事件
document.querySelectorAll('.close-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    this.closest('.modal').style.display = 'none';
  });
});

// 点击模态框外部关闭
window.addEventListener('click', function(e) {
  if (e.target.classList.contains('modal')) {
    e.target.style.display = 'none';
  }
});

额外排查建议 #

1. 检查页面源码：右键查看页面源代码，确认第二个循环的HTML（包括图片和模态框）是否被正确渲染，确保id和data-*属性唯一。
2. 查看控制台报错：打开浏览器开发者工具（F12）的Console面板，检查是否有语法错误或未定义变量的提示——这通常是第二个脚本未执行的直接原因。
3. 移除冗余脚本：彻底删除循环内的所有<script>标签，避免全局作用域污染。

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