javascript - 如何根据 JavaScript 中其他 div 的文本内容在图像库中制作标题？

标签 javascript arrays caption picturegallery

我有一个图像库，当您将鼠标悬停在每个图像上时，会显示一些信息。当您单击每个图像时，会显示完整尺寸。我想根据您将鼠标悬停在全尺寸版本上时显示的信息在全尺寸版本下添加标题。

为此，我制作了一系列标题文本。但是，我无法弄清楚如何将相关标题分配给相应的图像。我还想删除标题中的段落间距。

为了澄清，我添加了一些图像。

将鼠标悬停时看到的文本。不是这里的问题。 enter image description here

缩放图像下方的标题。我的问题: enter image description here

这是我的代码:

// Modal Images
var modal = document.getElementById("modalContainer");
var modalImg = document.getElementById("modalImg");
var imgArr = document.querySelectorAll(".img-container .img");
var currentIndex;
imgArr.forEach(function(img, i) {
  img.onclick = function() {
    var backgroundImage = img.style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
    modal.style.display = "block";
    modalImg.src = backgroundImage;
    currentIndex = i;
  };
});

// caption
var captionArr = [];
var captionInfo = document.querySelectorAll(".img-info");
var caption = document.getElementById("caption");
for (var i = 0; i < captionInfo.length; i++) {
  var current = captionInfo[i];
  console.log(current.textContent);
}
caption.innerHTML = captionArr[i];
console.log(captionArr);

// previous and next buttons
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");

next.addEventListener("click", nextImage);
modalImg.addEventListener("click", nextImage);

function nextImage() {
  if (currentIndex < imgArr.length - 1) {
    currentIndex++;
    modalImg.src = imgArr[currentIndex].style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
  }
}

prev.addEventListener("click", previousImage);

function previousImage() {
  if (currentIndex > 0) {
    currentIndex--;
    modalImg.src = imgArr[currentIndex].style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
  }
}

// close the modal
var span = document.getElementsByClassName("close")[0];

span.addEventListener("click", close);

function close() {
  modal.style.display = "none";
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.img {
  display: block;
  width: 200px;
  height: 100%;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.img-info {
  display: block;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px !important;
  max-width: 80%;
}

.img-container:hover {
  .img:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .img-info {
    opacity: 1;
  }
}

.frame {
  display: flex;
  height: 100px;
  min-height: 20rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  max-height: 80%;
  object-fit: contain;
  -o-object-fit: contain;
  animation-name: zoom;
  animation-duration: 0.6s;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: auto;
  padding: 0.8rem;
  color: #777;
  font-weight: normal;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  z-index: 3;
}

.prev:hover,
.next:hover {
  color: #000;
}

.next {
  right: 0;
}

.prev {
  left: 0;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
<div class="frame">
  <div class="img-container">
    <div class="img" style="background-image: url(https://images.unsplash.com/photo-1501159771943-cc9027db4d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)">
    </div>
    <div class="img-info">
      <div class="img-info-title">
        <h3>
          Some text 1...
        </h3>
      </div>
      <div class="img-info-subtitle">
        <h4>
          The rest 1...
        </h4>
      </div>
    </div>
  </div>
  <div class="img-container">
    <div class="img" style="background-image: url(https://images.unsplash.com/photo-1509042239860-f550ce710b93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80">
    </div>
    <div class="img-info">
      <div class="img-info-title">
        <h3>
          Some text 2...
        </h3>
      </div>
      <div class="img-info-subtitle">
        <h4>
          The rest 2...
        </h4>
      </div>
    </div>
  </div>
  <div class="img-container">
    <div class="img" style="background-image: url(https://images.unsplash.com/photo-1583936410736-a4af4f3013d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)">
    </div>
    <div class="img-info">
      <div class="img-info-title">
        <h3>
          Some text 3...
        </h3>
      </div>
      <div class="img-info-subtitle">
        <h4>
          The rest 3...
        </h4>
      </div>
    </div>
  </div>
</div>

<!-- The Modal -->
<div id="modalContainer" class="modal">
  <!-- Buttons -->
  <span class="close">&times;</span>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
  <!-- Modal Content -->
  <img id="modalImg" class="modal-content">
  <div class="caption">
    <p id="caption"></p>
  </div>
</div>
</div>

最佳答案

您可以做的第一件事是选择 h3 和 h4 并 trim 它们以删除空格，例如:

console.log(current.querySelector('h3').textContent.trim() + " " + current.querySelector('h4').textContent.trim() );


// caption
var captionArr = [];
var captionInfo = document.querySelectorAll(".img-info");
var caption = document.getElementById("caption");
for (var i = 0; i < captionInfo.length; i++) {
  var current = captionInfo[i];
  var current_str = current.querySelector('h3').textContent.trim() + " " + current.querySelector('h4').textContent.trim();
  console.log(current_str);
  captionArr.push(current_str);
}

// Modal Images
var modal = document.getElementById("modalContainer");
var modalImg = document.getElementById("modalImg");
var imgArr = document.querySelectorAll(".img-container .img");
var currentIndex;
imgArr.forEach(function(img, i) {
  img.onclick = function() {
    var backgroundImage = img.style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
    modal.style.display = "block";
    modalImg.src = backgroundImage;
    currentIndex = i;
    console.log('i',i);
    caption.innerHTML = captionArr[i];
  };
});

// previous and next buttons
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");

next.addEventListener("click", nextImage);
modalImg.addEventListener("click", nextImage);

function nextImage() {
  if (currentIndex < imgArr.length - 1) {
    currentIndex++;
    modalImg.src = imgArr[currentIndex].style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
    caption.innerHTML = captionArr[currentIndex];    
  }
}

prev.addEventListener("click", previousImage);

function previousImage() {
  if (currentIndex > 0) {
    currentIndex--;
    modalImg.src = imgArr[currentIndex].style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
    caption.innerHTML = captionArr[currentIndex];  
  }
}

// close the modal
var span = document.getElementsByClassName("close")[0];

span.addEventListener("click", close);

function close() {
  modal.style.display = "none";
}
.img-info h3,  .img-info h3,{
  color: #f1f1f1;
  opacity: 1 !important;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.img {
  display: block;
  width: 200px;
  height: 100%;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.img-info {
  display: block;
  /*opacity: 0;*/
  position: absolute;
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
  /*left: 15px !important;*/
  max-width: 80%;
}

.img-container:hover {
  .img:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .img-info {
    opacity: 1;
  }
}

.frame {
  display: flex;
  height: 100px;
  min-height: 20rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  max-height: 80%;
  object-fit: contain;
  -o-object-fit: contain;
  animation-name: zoom;
  animation-duration: 0.6s;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: auto;
  padding: 0.8rem;
  color: #777;
  font-weight: normal;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  z-index: 3;
}

.prev:hover,
.next:hover {
  color: #000;
}

.next {
  right: 0;
}

.prev {
  left: 0;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
<div class="frame">
  <div class="img-container">
    <div class="img" style="background-image: url(https://images.unsplash.com/photo-1501159771943-cc9027db4d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)">
    </div>
    <div class="img-info">
      <div class="img-info-title">
        <h3>
          Some text 1...
        </h3>
      </div>
      <div class="img-info-subtitle">
        <h4>
          The rest 1...
        </h4>
      </div>
    </div>
  </div>
  <div class="img-container">
    <div class="img" style="background-image: url(https://images.unsplash.com/photo-1509042239860-f550ce710b93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80">
    </div>
    <div class="img-info">
      <div class="img-info-title">
        <h3>
          Some text 2...
        </h3>
      </div>
      <div class="img-info-subtitle">
        <h4>
          The rest 2...
        </h4>
      </div>
    </div>
  </div>
  <div class="img-container">
    <div class="img" style="background-image: url(https://images.unsplash.com/photo-1583936410736-a4af4f3013d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)">
    </div>
    <div class="img-info">
      <div class="img-info-title">
        <h3>
          Some text 3...
        </h3>
      </div>
      <div class="img-info-subtitle">
        <h4>
          The rest 3...
        </h4>
      </div>
    </div>
  </div>
</div>

<!-- The Modal -->
<div id="modalContainer" class="modal">
  <!-- Buttons -->
  <span class="close">&times;</span>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
  <!-- Modal Content -->
  <img id="modalImg" class="modal-content">
  <div class="caption">
    <p id="caption" align="center" id="caption" style="color:  white;"></p>
  </div>
</div>
</div>

注意，我修改了 CSS，删除了很多内容:

.img-info {
  display: block;
  /*opacity: 0;*/
  position: absolute;
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
  /*left: 15px !important;*/
  max-width: 80%;
}

然后我们得到以下结果:

enter image description here

我相信这是理想的行为。

现在我想也要在模型弹出窗口下添加。

为此，我们需要稍微修改一下 JS(我们需要首先创建 captioArr 并将每个文本字符串插入其中。然后该数组的索引与 forEach 循环的索引相匹配，因此我们可以使用 caption.innerHTML=captionArr[i];):

// caption
var captionArr = [];
var captionInfo = document.querySelectorAll(".img-info");
var caption = document.getElementById("caption");
for (var i = 0; i < captionInfo.length; i++) {
  var current = captionInfo[i];
  var current_str = current.querySelector('h3').textContent.trim() + " " + current.querySelector('h4').textContent.trim();
  console.log(current_str);
  captionArr.push(current_str);
}

// Modal Images
var modal = document.getElementById("modalContainer");
var modalImg = document.getElementById("modalImg");
var imgArr = document.querySelectorAll(".img-container .img");
var currentIndex;
imgArr.forEach(function(img, i) {
  img.onclick = function() {
    var backgroundImage = img.style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
    modal.style.display = "block";
    modalImg.src = backgroundImage;
    currentIndex = i;
    console.log('i',i);
    caption.innerHTML = captionArr[i];
  };
});

然后p标签的样式有点(需要是白色居中才能看到)

<div class="caption">
  <p id="caption" align="center" id="caption" style="color:  white;"></p>
</div>

然后我们得到:

enter image description here

最后，要在单击上一个和下一个按钮时更改标题，请在 prevImage 和 nextImage 函数中添加一行:

function nextImage() {
  if (currentIndex < imgArr.length - 1) {
    currentIndex++;
    modalImg.src = imgArr[currentIndex].style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
    caption.innerHTML = captionArr[currentIndex];    
  }
}

function previousImage() {
  if (currentIndex > 0) {
    currentIndex--;
    modalImg.src = imgArr[currentIndex].style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
    caption.innerHTML = captionArr[currentIndex];  
  }
}

即，caption.innerHTML = CaptionArr[currentIndex];

关于javascript - 如何根据 JavaScript 中其他 div 的文本内容在图像库中制作标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60640095/

上一篇：JavaScript 对象数字索引像数组一样排序

下一篇：javascript - 如何使用Vue删除输入标签中的所有字符串

相关文章：

latex - latex -在图形标题中插入引用

javascript - 如何从图像数组创建一个非常简单的 jquery 幻灯片？

javascript - react 将 Prop 从子级传递给父级未定义

java - 用户的输入可以用于将对象添加到数组中吗？

javascript - underscorejs - 按属性对对象进行分组并打印它们

c# - 指向通用类型数组的指针？

wpf - WPF中带字幕的边框

javascript - 将所有 jQuery JavaScript 代码放在哪里？

javascript - 使用 Vue.js 更改 DOM 元素的值

javascript - 开发现代 Web 应用程序时， "Front-end Architect"角色是否相关？

©2024 IT工具网  联系我们