Javascript 在模式图像下方添加一个DIV框以进行说明

我正在为基于web的应用程序使用网格库。画廊没有图像的描述框，我不知道如何手动添加一个

如果我试图在保存图像的

中添加div，则单击时图像无法在全视图中加载。我尝试了多种方法，甚至在网上学习了一些技巧和教程，但似乎都不管用。即使内容类中的div被加载，它也会占用整个屏幕的宽度（大于图像的宽度）

所有的图片都有一个单独的宽度和高度，所以我不能固定的宽度太多。下面是我想要实现的示例，以及我在codepen代码段中的当前代码

以下是示例：

代码笔片段：

---

此说明框是我希望在图像的全视图中看到的内容（单击以获得全视图时为单个图像），而不是在“多媒体资料”视图中看到的内容。任何帮助都将不胜感激。

现在我想这是我第十次看到这个代码段和添加描述框的问题了。因此，我得出以下逐步解决方案：

HTML中的更改

将具有类的Div.desc作为子级添加到具有类od.gallery项的每个Div中。新的Div.desc保存描述

<div class="gallery-item">
  <div class="content">
    <img src="https://source.unsplash.com/random/?tech,care" alt="">
    <div class="desc">This is my Image Description</div>
  </div>
</div>

现在添加.content.desc和.full.content的类。描述

.content .desc {
  display:none;
  height:20%;
}
.full .content .desc {
  display:block;
  height:20%;
  margin-right:auto;
  margin-left:auto;
  background:#fff;
}

对JS的更改

代码优先

var gallery = document.querySelector("#gallery");
var getVal = function(elem, style) {
  return parseInt(window.getComputedStyle(elem).getPropertyValue(style));
};
var getHeight = function(item) {
  return item.querySelector(".content").getBoundingClientRect().height;
};
var resizeAll = function() {
  var altura = getVal(gallery, "grid-auto-rows");
  var gap = getVal(gallery, "grid-row-gap");
  gallery.querySelectorAll(".gallery-item").forEach(function(item) {
    var el = item;
    el.style.gridRowEnd =
      "span " + Math.ceil((getHeight(item) + gap) / (altura + gap));
  });

  gallery.querySelectorAll(".full").forEach(function(item) {
var imgwidth = item.getElementsByTagName('img')[0].clientWidth;
    var desc = item.getElementsByClassName('desc')[0];
    desc.style.width=imgwidth+"px";
 });
};
gallery.querySelectorAll("img").forEach(function(item) {
  item.classList.add("byebye");
  if (item.complete) {
    console.log(item.src);
  } else {
    item.addEventListener("load", function() {
      var altura = getVal(gallery, "grid-auto-rows");
      var gap = getVal(gallery, "grid-row-gap");
      var gitem = item.parentElement.parentElement;
      gitem.style.gridRowEnd =
        "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap));
      item.classList.remove("byebye");
    });
  }
});
window.addEventListener("resize", resizeAll);
gallery.querySelectorAll(".gallery-item").forEach(function(item) {
  item.addEventListener("click", function(event) {
if ((item.classList.contains("full") && ['IMG', 'A'].includes(event.target.tagName)) || (item.classList.contains("full") && ['desc'].includes(event.target.className))) {
      return;
    }
    item.classList.toggle("full");
    var imgwidth = item.getElementsByTagName('img')[0].clientWidth;
    var desc = item.getElementsByClassName('desc')[0];
    desc.style.width=imgwidth+"px";
  });
});

在resizeral函数中，我们添加了一个小片段，用于在屏幕按图像宽度调整大小时调整.desc类的大小。 在.gallery项单击函数中，我们添加了一个小代码，用于在切换后调整div的大小

这就是我的工作，很好，符合你的要求

---

在这里您可以找到更新的代码笔：（只有第一个项目有desc.class）

欢迎使用SO！当你提出一个问题时，试着添加一个最小的内容：输入样本、预期输出样本、你尝试了什么、研究以及你在哪里。你能告诉我们你试过什么吗？谢谢。它起作用了。我希望这是第一次回答，这样我就不必麻烦地问它多次了。对此我很抱歉。但是，当我单击描述框时，图像关闭。为什么？我不明白。只有在黑暗中的某个区域外单击时，它才应该关闭，因为它现在正在工作。为什么会这样？JS中有修复吗？我更改了JS中的代码。。。如果（（item.classList.contains（“full”）&&&['IMG'，'A'].includes（event.target.tagName）），现在需要对class.desc:-）上的单击进行额外检查，则添加该行。。。代码笔也在更新中。如果答案是肯定的。请将问题标记为已解决感谢您的帮助。非常感谢D

var gallery = document.querySelector("#gallery");
var getVal = function(elem, style) {
  return parseInt(window.getComputedStyle(elem).getPropertyValue(style));
};
var getHeight = function(item) {
  return item.querySelector(".content").getBoundingClientRect().height;
};
var resizeAll = function() {
  var altura = getVal(gallery, "grid-auto-rows");
  var gap = getVal(gallery, "grid-row-gap");
  gallery.querySelectorAll(".gallery-item").forEach(function(item) {
    var el = item;
    el.style.gridRowEnd =
      "span " + Math.ceil((getHeight(item) + gap) / (altura + gap));
  });

  gallery.querySelectorAll(".full").forEach(function(item) {
var imgwidth = item.getElementsByTagName('img')[0].clientWidth;
    var desc = item.getElementsByClassName('desc')[0];
    desc.style.width=imgwidth+"px";
 });
};
gallery.querySelectorAll("img").forEach(function(item) {
  item.classList.add("byebye");
  if (item.complete) {
    console.log(item.src);
  } else {
    item.addEventListener("load", function() {
      var altura = getVal(gallery, "grid-auto-rows");
      var gap = getVal(gallery, "grid-row-gap");
      var gitem = item.parentElement.parentElement;
      gitem.style.gridRowEnd =
        "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap));
      item.classList.remove("byebye");
    });
  }
});
window.addEventListener("resize", resizeAll);
gallery.querySelectorAll(".gallery-item").forEach(function(item) {
  item.addEventListener("click", function(event) {
if ((item.classList.contains("full") && ['IMG', 'A'].includes(event.target.tagName)) || (item.classList.contains("full") && ['desc'].includes(event.target.className))) {
      return;
    }
    item.classList.toggle("full");
    var imgwidth = item.getElementsByTagName('img')[0].clientWidth;
    var desc = item.getElementsByClassName('desc')[0];
    desc.style.width=imgwidth+"px";
  });
});