本文介绍如何在 Bootstrap 轮播图中，点击任意图片时动态获取其对应 <h5> 标题与 <p> 描述，并完整渲染至模态框中，实现图文一体化展示。
本文介绍如何在 bootstrap 轮播图中，点击任意图片时动态获取其对应 `
` 标题与 `
` 描述，并完整渲染至模态框中，实现图文一体化展示。
在构建响应式图库或作品集页面时，常需将轮播图（Carousel）与模态框（Modal）联动：用户点击某张图片，不仅显示高清大图，还需同步呈现原始轮播项中的标题与说明文字。默认仅读取 <img> 标签属性（如 src）的方案无法满足该需求——因为标题（<h5>）和正文（<p>）实际位于同级的 .carousel-caption 容器内，而非 <img> 自身。
关键在于准确定位兄弟节点：当点击目标为 .d-block 图片时，其父元素是 .carousel-item，而 .carousel-caption 正是该父元素的下一个相邻兄弟元素（nextElementSibling）。因此，我们可通过 e.target.parentElement.nextElementSibling 精准获取对应 caption 区域，再使用 querySelector 提取其中的标题与段落文本：
document.addEventListener("click", function (e) {
if (e.target.classList.contains("d-block")) {
const imgSrc = e.target.getAttribute("src");
const captionContainer = e.target.parentElement.nextElementSibling;
// 验证 caption 容器及子元素存在性，避免运行时错误
if (!captionContainer || !captionContainer.classList.contains("carousel-caption")) {
console.warn("未找到有效的 carousel-caption 容器");
return;
}
const titleEl = captionContainer.querySelector("h5");
const textEl = captionContainer.querySelector("p");
if (!titleEl || !textEl) {
console.warn("caption 中缺少 h5 或 p 元素");
return;
}
// 更新模态框内容
document.querySelector(".modal-img").src = imgSrc;
document.querySelector(".modal-title").textContent = titleEl.textContent;
document.querySelector(".modal-text").textContent = textEl.textContent;
// 初始化并显示模态框
const modal = new bootstrap.Modal(document.getElementById("gallery-modal"));
modal.show();
}
});⚠️ 注意事项：
- 模态框 HTML 中必须新增 <h5 class="modal-title"></h5> 和 <p class="modal-text"></p> 占位节点（置于 .modal-body 内），否则脚本将无法注入内容；
- 建议为 .carousel-caption 添加 d-none d-md-block 类确保移动端不干扰布局，同时不影响 JS 逻辑（因 querySelector 不依赖可见性）；
- 使用 textContent（而非 innerText）更安全，可避免潜在的 XSS 风险（若 caption 内容来自可信源且含 HTML，可改用 innerHTML 并配合转义处理）；
- 若轮播图支持键盘导航或触摸滑动，建议额外监听 slide.bs.carousel 事件以同步更新当前激活项的预加载逻辑（非本例必需，但利于进阶优化）。
此方案兼容 Bootstrap 5+，无需修改原有轮播结构，仅通过轻量级 DOM 遍历即可实现语义化图文联动，兼顾可维护性与用户体验。
立即学习“Java免费学习笔记（深入）”；
