如何用jQuery实现Lightbox内容切换：替换为下一个父元素的.content

没问题，我来帮你搞定这个自定义Lightbox的需求！咱们一步步来实现：

1. HTML结构设计 #

首先得把Gallery和Lightbox的骨架搭好，每个Gallery项里包含触发图片和对应的内容块：

<!-- Gallery容器 -->
<div class="gallery-container">
  <div class="gallery-item">
    <img src="image1.jpg" alt="图1" class="gallery-img">
    <div class="content">这是图1对应的内容，支持任意HTML</div>
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="图2" class="gallery-img">
    <div class="content">这是图2对应的内容，比如文字、图片甚至视频</div>
  </div>
  <div class="gallery-item">
    <img src="image3.jpg" alt="图3" class="gallery-img">
    <div class="content">这是图3对应的内容，完全自定义</div>
  </div>
</div>

<!-- Lightbox容器 -->
<div class="lightbox">
  <div class="lightbox-overlay"></div>
  <div class="lightbox-content-wrapper">
    <div class="lightbox-content"></div>
    <button class="icon-right">→</button>
    <!-- 可以再加左箭头，按需添加 -->
  </div>
</div>

2. CSS样式配置 #

给Lightbox加上基础样式，让它默认隐藏，激活时居中显示，背景半透明：

/* 默认隐藏Lightbox */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

/* 半透明遮罩层 */
.lightbox-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

/* 内容容器，居中显示 */
.lightbox-content-wrapper {
  position: relative;
  margin: 5% auto;
  width: 80%;
  max-width: 800px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

/* 右箭头按钮样式 */
.icon-right {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
}

/* Gallery图片样式，可选 */
.gallery-img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
  margin: 10px;
}

3. JavaScript交互逻辑 #

核心功能实现：点击图片打开Lightbox，点击右箭头切换到下一个内容：

// 获取DOM元素
const galleryImgs = document.querySelectorAll('.gallery-img');
const lightbox = document.querySelector('.lightbox');
const lightboxContent = document.querySelector('.lightbox-content');
const iconRight = document.querySelector('.icon-right');
const galleryItems = document.querySelectorAll('.gallery-item');
let currentItemIndex = 0; // 记录当前显示的Gallery项索引

// 打开Lightbox的函数
function openLightbox(index) {
  currentItemIndex = index;
  // 获取对应项的内容并插入到Lightbox
  const targetContent = galleryItems[index].querySelector('.content').innerHTML;
  lightboxContent.innerHTML = targetContent;
  lightbox.style.display = 'block';
}

// 切换到下一个内容的函数
function goToNextContent() {
  // 计算下一个索引，最后一个之后回到第一个
  currentItemIndex = (currentItemIndex + 1) % galleryItems.length;
  const nextContent = galleryItems[currentItemIndex].querySelector('.content').innerHTML;
  lightboxContent.innerHTML = nextContent;
}

// 给每个Gallery图片添加点击事件
galleryImgs.forEach((img, index) => {
  img.addEventListener('click', () => openLightbox(index));
});

// 右箭头点击事件
iconRight.addEventListener('click', goToNextContent);

// 点击遮罩层关闭Lightbox（可选功能）
document.querySelector('.lightbox-overlay').addEventListener('click', () => {
  lightbox.style.display = 'none';
});

关键逻辑说明 #

• 点击图片时，记录当前Gallery项的索引，把对应.content的HTML内容插入到Lightbox中并显示
• 点击右箭头时，通过索引计算下一个项，循环切换（最后一个之后回到第一个）
• 遮罩层点击关闭是可选功能，你可以根据需求保留或删除

这样就能完全实现你要的功能啦，样式和内容都可以根据自己的需求自定义调整～

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