如何让函数适配多ID元素，点击触发对应元素的Fullscreen API

完全不需要为12个ID重复写相同的函数，只需要一个通用函数就能处理所有图片的全屏请求，下面给你两种简单可行的实现方式：

方法一：直接通过点击事件传参（适合新手快速上手） #

这种方法不需要额外的事件绑定逻辑，直接给每张图片添加点击事件，把当前点击的元素传给函数：

HTML 代码 #

<!-- 给每张图片添加 onclick 事件，传入 this 指代当前点击的图片 -->
<img src="你的图片路径1.jpg" onclick="openFullscreen(this)">
<img src="你的图片路径2.jpg" onclick="openFullscreen(this)">
<!-- 剩下10张图片依葫芦画瓢即可 -->

JavaScript 代码 #

function openFullscreen(element) {
  // 兼容不同浏览器的全屏API前缀
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { 
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { 
    element.msRequestFullscreen();
  }
}

方法二：事件委托（更高效的写法） #

如果觉得给每张图片加 onclick 太麻烦，可以用事件委托——给图片的父容器绑定一个点击事件，自动判断点击的是哪张图片：

HTML 代码 #

<!-- 把所有图片放在同一个容器里 -->
<div class="gallery">
  <img src="你的图片路径1.jpg" class="gallery-img">
  <img src="你的图片路径2.jpg" class="gallery-img">
  <!-- 剩下10张图片 -->
</div>

JavaScript 代码 #

// 获取图片容器
const gallery = document.querySelector('.gallery');

// 给容器绑定点击事件
gallery.addEventListener('click', function(e) {
  // 判断点击的元素是图片
  if (e.target.classList.contains('gallery-img')) {
    // 调用全屏函数，传入当前点击的图片
    openFullscreen(e.target);
  }
});

function openFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { 
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { 
    element.msRequestFullscreen();
  }
}

额外提示 #

• 你原来代码里的 var elem = document.getElementById("image1"); 没有用到，可以直接删掉。
• 全屏API在部分浏览器里可能需要用户手动触发（比如点击事件），这也是为什么要通过点击触发的原因，符合浏览器的安全规则。

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