如何用JavaScript实现点击图片隐藏图片容器并显示视频容器？

嘿，这事儿很好解决！我基于你提供的HTML结构，整理了几种原生JavaScript的实现方案，你可以根据自己的需求选：

首先先确认你的HTML结构（我帮你格式化了一下，并且给视频区域加上了初始隐藏的样式）：

<div class="picture-section">
  <img id="play-video" src="/images/Play.svg">
  <img src="images/1.jpg">
</div>
<div class="video-section" style="display: none;">
  <video width="100%" autoplay loop>
    <source src="/videos/v1.mp4" type="video/mp4">
  </video>
</div>

方法一：直接给触发元素绑定点击事件 #

如果只想让点击播放图标（#play-video）的时候触发切换，可以这么写：

// 获取需要操作的DOM元素
const pictureContainer = document.querySelector('.picture-section');
const videoContainer = document.querySelector('.video-section');
const playTrigger = document.getElementById('play-video');

// 绑定点击事件
playTrigger.addEventListener('click', () => {
  // 隐藏图片区域
  pictureContainer.style.display = 'none';
  // 显示视频区域
  videoContainer.style.display = 'block';
});

如果想让整个图片区域（包括背景图）被点击都能触发切换，只需要把事件绑定到.picture-section上：

const pictureContainer = document.querySelector('.picture-section');
const videoContainer = document.querySelector('.video-section');

pictureContainer.addEventListener('click', () => {
  pictureContainer.style.display = 'none';
  videoContainer.style.display = 'block';
});

方法二：事件委托（适合动态元素场景） #

如果你的图片区域是后续动态生成的，或者未来可能会添加新元素，用事件委托会更灵活，不用重复绑定事件：

document.addEventListener('click', (e) => {
  // 判断点击的元素是否在图片区域内
  const targetSection = e.target.closest('.picture-section');
  if (targetSection) {
    const videoContainer = document.querySelector('.video-section');
    targetSection.style.display = 'none';
    videoContainer.style.display = 'block';
  }
});

扩展：用CSS类控制显示隐藏（推荐） #

如果不想把样式写在JavaScript里，更推荐用CSS类来管理显示状态，这样样式和逻辑分离，维护更方便：

首先在CSS里定义类：

/* 默认隐藏视频区域 */
.video-section {
  display: none;
}

/* 隐藏元素的类 */
.hidden {
  display: none;
}

/* 显示元素的类 */
.show {
  display: block;
}

然后JavaScript里只需要操作类即可：

const pictureContainer = document.querySelector('.picture-section');
const videoContainer = document.querySelector('.video-section');

pictureContainer.addEventListener('click', () => {
  pictureContainer.classList.add('hidden');
  videoContainer.classList.add('show');
});

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