如何用单个按钮依次切换12张图片的显示与隐藏状态

嘿，这就给你搞定这个需求！下面是完整的可运行代码，完全符合你描述的点击逻辑：

HTML 结构 #

首先搭建页面的基础结构，包含12张图片和一个控制按钮：

<div class="image-container">
  <!-- 你可以替换src为自己的图片地址 -->
  <img src="https://picsum.photos/200/200?random=1" alt="图片1">
  <img src="https://picsum.photos/200/200?random=2" alt="图片2">
  <img src="https://picsum.photos/200/200?random=3" alt="图片3">
  <img src="https://picsum.photos/200/200?random=4" alt="图片4">
  <img src="https://picsum.photos/200/200?random=5" alt="图片5">
  <img src="https://picsum.photos/200/200?random=6" alt="图片6">
  <img src="https://picsum.photos/200/200?random=7" alt="图片7">
  <img src="https://picsum.photos/200/200?random=8" alt="图片8">
  <img src="https://picsum.photos/200/200?random=9" alt="图片9">
  <img src="https://picsum.photos/200/200?random=10" alt="图片10">
  <img src="https://picsum.photos/200/200?random=11" alt="图片11">
  <img src="https://picsum.photos/200/200?random=12" alt="图片12">
</div>
<button id="displayBtn">display</button>

CSS 基础样式（可选） #

给页面加一点样式，让布局更美观：

.image-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.image-container img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

#displayBtn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

JavaScript 核心逻辑 #

这里实现点击按钮的逐张隐藏/循环显示功能：

// 获取按钮和所有图片元素
const displayBtn = document.getElementById('displayBtn');
const images = document.querySelectorAll('.image-container img');
// 初始化点击计数器
let clickCount = 0;

displayBtn.addEventListener('click', () => {
  clickCount++;
  // 计算当前要操作的图片索引（0-11）
  const imgIndex = (clickCount - 1) % 12;
  // 判断当前是隐藏阶段（前12次点击）还是显示阶段（第13-24次点击）
  const isHidingPhase = Math.floor((clickCount - 1) / 12) % 2 === 0;

  if (isHidingPhase) {
    // 隐藏对应索引的图片
    images[imgIndex].style.display = 'none';
  } else {
    // 显示对应索引的图片
    images[imgIndex].style.display = 'block';
  }
});

关键逻辑说明 #

• 计数器clickCount：记录用户点击次数，每次点击自动递增。
• 索引计算：通过(clickCount - 1) % 12实现12张图片的循环索引，确保每次点击都对应正确的图片。
• 阶段判断：用Math.floor((clickCount - 1) / 12) % 2区分隐藏/显示阶段，偶数循环（0、2、4...）是隐藏，奇数循环（1、3、5...）是显示，支持无限循环操作。
• 可见性控制：通过修改style.display属性控制图片显示/隐藏，你也可以改用classList.add/remove添加隐藏类，更贴合CSS模块化写法。

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