本文介绍一种简洁可靠的 JavaScript 方案，用于检测 WordPress 图库幻灯片中的图片数量，并在仅含 1 张图片时自动隐藏 > 导航按钮，从而提升用户体验。
本文介绍一种简洁可靠的 javascript 方案，用于检测 wordpress 图库幻灯片中的图片数量，并在仅含 1 张图片时自动隐藏 `>` 导航按钮，从而提升用户体验。
在构建响应式图片幻灯片时，一个常见但易被忽视的 UX 细节是：当图库中仅有一张图片时，仍显示不可用的「上一张」和「下一张」按钮，不仅造成视觉干扰，还可能误导用户认为存在更多内容。本文提供一套轻量、健壮且可复用的解决方案，无需重写整个轮播逻辑，即可精准控制导航控件的显隐状态。
核心思路
我们不再依赖冗长的 DOM 重建流程（如原代码中反复 insertAdjacentHTML + remove()），而是直接遍历每个 .wp-block-gallery 容器，统计其内部 .wpcookie-slide 元素数量。若数量 ≤ 1，则统一隐藏所有带 wpcookie-controls 类的导航元素；否则保留并启用交互功能。
推荐实现代码
以下为优化后的完整 JS 实现（兼容多个图库实例）：
document.querySelectorAll(".wp-block-gallery").forEach(gal => {
const slides = gal.querySelectorAll(".wpcookie-slide");
const n = slides.length;
let current = 0;
// 隐藏导航按钮：仅当图片数 ≤ 1 时生效
if (n {
el.style.display = "none";
});
// 提前退出——无需绑定事件或初始化轮播
return;
}
// 初始化：显示第一张图
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;
}
HTML 结构说明（保持简洁）
导航按钮需添加 data-inc 属性以支持事件委托，例如：
<span class="wpcookie-controls" data-inc="-1"> <span class="wpcookie-controls" data-inc="1"> Next >> </span></span>
此设计避免了为每个按钮单独绑定事件监听器，显著提升性能与可维护性。
注意事项
- ✅ 作用域隔离：
forEach(gal => {...})确保每个图库独立运行，互不干扰； - ✅ 零依赖：不依赖 jQuery 或外部库，纯原生 JavaScript；
- ⚠️ DOM 稳定性：请确保脚本在 DOM 加载完成后执行（推荐置于
DOMContentLoaded或底部）； - ⚠️ 样式兼容性：若使用
display: none影响布局，可改用visibility: hidden或opacity: 0配合pointer-events: none； - ? 扩展建议：如需支持键盘导航（←→ 方向键）或自动播放，可在
show()函数基础上轻松扩展。
该方案以最少代码达成最大可用性改进——让单图场景更干净，多图场景更流畅，真正践行“渐进增强”的前端设计哲学。
