模态框图片的alt标题显示为'undefined'的问题求助

嗨，我看了你的代码，发现两个关键小问题导致caption显示undefined，咱们一步步来解决：

问题根源 #

1. this指向不对：你用内联onclick="showFullRes(...)"调用函数时，函数里的this默认指向window对象，而不是触发点击的.artwork元素，所以this.alt自然拿不到有效内容。
2. alt属性放错位置：alt是<img>标签的专属属性，你把它加在了<div class="artwork">上，这是无效的，浏览器不会识别div的alt属性。

解决方案 #

我们需要调整函数调用时的参数，把触发点击的元素传进去，然后从元素里找到对应的img标签获取alt文本：

1. 修改JavaScript函数

更新showFullRes函数，增加一个参数接收点击的元素，然后从这个元素里获取img的alt：

function showFullRes(imageSrc, clickedElement) {
  const overlay = document.getElementById("full-res-overlay");
  const fullResImage = document.getElementById("full-res-image");
  const captionText = document.getElementById("caption");

  fullResImage.src = imageSrc;
  overlay.style.display = "block";
  // 从点击的元素里找到子img标签，获取它的alt文本
  const imgAlt = clickedElement.querySelector('img').alt;
  captionText.innerHTML = imgAlt;
}

function closeFullRes() {
  const overlay = document.getElementById("full-res-overlay");
  overlay.style.display = "none";
}

2. 更新HTML的点击事件调用

在每个.artwork的onclick里，把this作为第二个参数传进去，同时移除div上无效的alt属性：

<div class="gallery-container expanded" style="width: 89%;">
  <div class="artwork-container">

    <div class="artwork" style="width: 35vw; height: 44vw;" onclick="showFullRes('https://sinniister.neocities.org/ARTWORK/VASCHA/REDVOH2.JPG', this)">
      <img
              src="https://sinniister.neocities.org/ARTWORK/VASCHA/REDVOH2TN.jpeg" alt="Original Sketch"
             />
    </div>

    <div class="artwork" style="width: 35vw; height: 44vw;" onclick="showFullRes('https://sinniister.neocities.org/ARTWORK/VASCHA/VOH21.JPG', this)">
      <img
              src="https://sinniister.neocities.org/ARTWORK/VASCHA/VOH21S.JPG" alt="Final Version"
             />
    </div>
  </div>
</div>

<div class="full-res-overlay" id="full-res-overlay" onclick="closeFullRes()">
  <img
        src=""
        alt="Full Resolution Artwork"
        class="full-res-image"
        id="full-res-image"
      />
  <div id="caption" style="color: white;"></div>
</div>

补充说明 #

这样修改后，点击每个缩略图时，函数就能正确拿到对应img标签的alt文本，显示在caption里了。你原来的CSS部分没问题，不需要改动~

备注：内容来源于stack exchange，提问作者Louis Cairns