点击按钮逐次隐藏div内多张相同图片的功能实现问题

你当前代码的问题是直接修改了父容器#output的visibility属性，父元素设为隐藏后，其包含的所有子图片都会同步隐藏，所以才会出现点击一次所有图片全部消失的情况。另外你给按钮同时写了JS绑定点击事件和HTML内联onclick="onClick1()"，但你没有定义onClick1函数，运行时会控制台报错，建议删掉冗余的内联点击属性。

实现方案 #

我们只需要维护一个计数器，每次点击后按顺序选中当前要隐藏的图片，单独修改它的可见性即可：

修改后HTML代码

<input id="btn1" type="button" value="Click me" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
  <img src="/images/person1.jpg">
  <img src="/images/person1.jpg">
  <img src="/images/person1.jpg">
  <img src="/images/person1.jpg">
  <img src="/images/person1.jpg">
</div>

修改后JS代码

// 初始化计数器，记录下次要隐藏的图片下标
let hideIndex = 0;
document.getElementById("btn1").onclick = function() {
  const imgList = document.querySelectorAll("#output img");
  // 还有未隐藏的图片时才执行操作
  if (hideIndex < imgList.length) {
    imgList[hideIndex].style.visibility = "hidden";
    hideIndex++;
  }
  // 若需要全部隐藏后点击重置显示，可放开下面注释的代码
  // else {
  //   imgList.forEach(img => img.style.visibility = "visible");
  //   hideIndex = 0;
  // }
}

补充说明：如果希望隐藏图片后原有位置也消失、不留空白，把visibility: "hidden"替换为display: "none"即可

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