JavaScript实现可点击图片点击10次后隐藏的方法咨询

这里给你两种简单易懂的实现方案，适合JavaScript新手：

方式一：全局计数器 + 隐藏元素 #

先写HTML结构，给图片设置唯一ID方便JS获取：

<img id="clickable-img" src="你的图片路径" alt="可点击图片" style="cursor: pointer;">

再添加JavaScript代码（建议放在HTML底部，确保DOM加载完成后执行）：

// 初始化点击次数计数器
let clickCount = 0;
// 获取目标图片元素
const targetImg = document.getElementById('clickable-img');

// 给图片绑定点击事件
targetImg.addEventListener('click', function() {
  clickCount++;
  // 判断点击次数是否达到10次
  if (clickCount === 10) {
    // 让图片完全消失（不占页面空间）
    targetImg.style.display = 'none';
    // 若想保留图片位置仅隐藏，可替换为：
    // targetImg.style.visibility = 'hidden';
  }
});

方式二：闭包封装计数器（避免全局变量） #

这种方式把计数器封装在函数内部，更简洁且不会污染全局作用域：

<img id="clickable-img" src="你的图片路径" alt="可点击图片" style="cursor: pointer;">

<script>
document.getElementById('clickable-img').addEventListener('click', (function() {
  let count = 0;
  return function() {
    count++;
    if (count === 10) {
      // 直接从DOM中移除图片元素
      this.remove();
    }
  };
})());
</script>

核心逻辑说明： #

• addEventListener：为图片绑定点击事件，每次点击触发内部函数
• 计数器：记录点击次数，每次点击后递增
• 三种"消失"方式的区别：
  • display: none：元素完全隐藏，不再占据页面空间
  • visibility: hidden：元素不可见，但仍保留原有位置
  • element.remove()：直接将元素从DOM树中删除，彻底移除

内容的提问来源于stack exchange，提问作者Script-issues