JS标签图片画廊：调用myFunction时用相对路径替代this参数

现有myFunction函数默认接收DOM图片元素作为入参，内部会调用元素专属的getAttribute()方法、读取alt属性。直接传入字符串格式的图片路径时，字符串类型不存在这些DOM属性和方法，代码会直接报错无法运行。

CSS代码无需任何修改，只需调整JS函数逻辑和HTML内的事件调用写法即可。

修改JS函数 #

调整函数入参为图片路径和可选的图片描述文本，直接赋值给展开图元素即可：

function myFunction(imgSrc, imgAlt = "") {
  const expandImg = document.getElementById("expandedImg");
  const imgText = document.getElementById("imgtext");
  // 设置展开图资源路径
  expandImg.src = imgSrc;
  // 设置展开图下方描述文本
  imgText.textContent = imgAlt;
  // 显示默认隐藏的展开图容器
  expandImg.parentElement.style.display = "block";
}

function closeExpandedImg(btn) {
  btn.parentElement.style.display = 'none';
}

修改HTML调用逻辑 #

所有图片的onclick事件直接传入对应要展示的图片路径、描述文本即可。你需要的第二张缩略图点击后展示img/img_lights.jpg的效果，按如下写法实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <!-- 缩略图网格 -->
  <div class="row">
    <div class="column">
      <img src="img/img_nature.jpg" alt="Nature" onclick="myFunction('img/img_nature.jpg', 'Nature');">
    </div>
    <div class="column">
      <!-- 点击该雪地图缩略图，展开显示灯光图 -->
      <img src="img/img_snow.jpg" alt="Snow" onclick="myFunction('img/img_lights.jpg', 'Lights');">
    </div>
    <div class="column">
      <img src="img/img_mountains.jpg" alt="Mountains" onclick="myFunction('img/img_mountains.jpg', 'Mountains');">
    </div>
    <div class="column">
      <img src="img/img_lights.jpg" alt="Lights" onclick="myFunction('img/img_lights.jpg', 'Lights');">
    </div>
  </div>

  <!-- 展开图容器 -->
  <div class="container">
    <span onclick="closeExpandedImg(this);" class="closebtn">&times;</span>
    <img id="expandedImg">
    <div id="imgtext"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

注意：传入字符串路径时，要和onclick属性本身的引号做嵌套区分，比如外层用双引号时，内层路径和文本用单引号包裹，避免触发语法错误。

可选兼容写法 #

如果需要同时兼容原有传入this元素的调用方式、不需要批量修改旧代码，可以给函数增加类型判断逻辑：

function myFunction(media, imgAlt = "") {
  const expandImg = document.getElementById("expandedImg");
  const imgText = document.getElementById("imgtext");
  let targetSrc, targetAlt;
  // 判断入参类型：字符串为直接传路径，对象为传入DOM元素
  if (typeof media === "string") {
    targetSrc = media;
    targetAlt = imgAlt;
  } else {
    targetSrc = media.src;
    targetAlt = media.alt;
  }
  expandImg.src = targetSrc;
  imgText.textContent = targetAlt;
  expandImg.parentElement.style.display = "block";
}

使用该兼容写法后，onclick="myFunction(this)"和直接传路径的写法都可以正常运行。

内容的提问来源于stack exchange，提问作者Jonas Bjørn Pedersen