本文介绍一种简洁可靠的 JavaScript 方案，用于检测每个 .wp-block-gallery 幻灯片中图片数量，并在仅含 1 张图片时自动隐藏 > 导航按钮，提升用户体验与界面合理性。
本文介绍一种简洁可靠的 javascript 方案，用于检测每个 `.wp-block-gallery` 幻灯片中图片数量，并在仅含 1 张图片时自动隐藏 `>` 导航按钮，提升用户体验与界面合理性。
在构建响应式图片轮播组件时，一个常见但易被忽视的 UX 细节是：当幻灯片仅包含一张图片时，仍显示「上一页」和「下一页」按钮不仅无功能价值，还可能误导用户、破坏视觉一致性。原始实现中存在逻辑冗余（如重复生成 HTML、多次遍历 DOM）、作用域混淆（全局查询 .wpcookie-controls 导致多图库间误操作），且未真正移除或隐藏按钮。
以下为优化后的完整解决方案，具备轻量、健壮、可扩展三大特性：
✅ 核心思路
- 遍历所有
.wp-block-gallery容器； - 统计其内部
.wpcookie-slide元素数量（即有效图片数）； - 若数量 ≤ 1，则隐藏该容器内所有
.wpcookie-controls按钮； - 使用事件委托 +
data-inc属性实现统一导航逻辑，避免为每个按钮单独绑定事件； - 初始状态即调用
show(0)渲染首张图片，确保加载即可见。
✅ 推荐实现代码
document.querySelectorAll(".wp-block-gallery").forEach(gal => {
const slides = gal.querySelectorAll(".wpcookie-slide");
const n = slides.length;
let current = 0;
// 【关键】仅当图片数 ≥ 2 时才保留导航按钮
if (n <= 1) {
gal.querySelectorAll(".wpcookie-controls").forEach(el => {
el.style.display = "none";
});
}
// 切换显示逻辑（支持循环）
const show = inc => {
current = (current + n + inc) % n; // 防负数取模
slides.forEach((slide, i) => {
slide.style.display = (i === current) ? "block" : "none";
});
};
// 事件委托：仅对带 data-inc 的元素响应点击
gal.addEventListener("click", e => {
if (e.target.dataset.inc !== undefined) {
show(+e.target.dataset.inc);
}
});
// 初始化显示第一张
show(0);
});✅ 对应 CSS（增强可用性）
.wpcookie-controls {
cursor: pointer;
user-select: none;
}
/* 可选：为禁用状态添加视觉反馈 */
.wpcookie-controls[style*="display: none"] {
opacity: 0.4;
pointer-events: none;
}✅ HTML 结构要求（保持语义清晰）
确保每个 .wp-block-gallery 中的导航按钮使用 data-inc 属性声明方向：
<span class="wpcookie-controls" data-inc="-1"> << Prev </span> <span class="wpcookie-controls" data-inc="1"> Next >> </span>
⚠️ 注意事项
-
避免全局查询：原代码中
document.querySelector('.wpcookie-controls...')会跨多个画廊匹配首个元素，导致其他画廊按钮失效；本方案严格限定在当前gal范围内操作。 -
无需重写 DOM：不推荐通过
insertAdjacentHTML重建整个结构——既低效又易引入 XSS 风险（若alt或src含恶意内容）；直接复用现有 DOM 更安全可控。 -
兼容性友好：使用
forEach、dataset等现代 API，已兼容所有主流浏览器（Chrome 15+, Firefox 6+, Safari 5.1+, Edge 12+）。 - 可扩展性强：后续如需添加自动轮播、键盘控制或触摸支持，均可基于此结构平滑扩展。
该方案以最少代码达成精准控制，兼顾性能与可维护性，是 WordPress 块编辑器中自定义图库交互的理想实践。
