时间戳

首页 > 解决方案 > Javascript多循环显示我的模态信息

javascript - Javascript多循环显示我的模态信息

问题描述

我正在尝试显示一个模式，其中包含用户单击的图像的名称和描述。目前我只得到最后一张图片的名称，没有描述（坏循环）。

请查看我的代码，并告诉我如何解决此问题。我正在看这个循环，我觉得它不对，但我就是想不通如何修复它。已经尝试了一段时间......非常感谢，伙计们。

发现一个问题 - myName[i].innerHTML，我无法访问变量 i，我收到错误（无法读取未定义的属性“innerHTML”），如果我手动输入数字，那么它会正确打印名称。

// Get modal
let modal = document.getElementById("myModal");
let i;

// Get image
let img = document.getElementsByClassName("myImg");
let myName = document.getElementsByClassName("myName");
let myDesc = document.getElementsByClassName("myDesc");
let modalImg = document.getElementById("showImg");
let modalName = document.getElementById("imgName");
let modalDesc = document.getElementById("imgDesc");

// Loop through images
for (i = 0; i < img.length; i++) {
    img[i].onclick = function () {
        modal.style.display = "block";
        modalImg.src = this.src;
        modalName.innerHTML = myName[i].innerHTML;
        modalDesc.innerHTML = myDesc[i].innerHTML;
    }
}
 // Images
<div>
    <img class="myImg" src="images/1.png" alt="">
    <h5 class="myName">Image name1</h5>
    <p class="myDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quaerat, aut.</p>
</div>

<div>
    <img class="myImg" src="images/2.png" alt="">
    <h5 class="myName">Image name2</h5>
    <p class="myDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quaerat, aut.</p>
</div>

<div>
    <img class="myImg" src="images/3.png" alt="">
    <h5 class="myName">Image name3</h5>
    <p class="myDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, debitis, provident.</p>
</div>

// Modal
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="showImg">
    <div id="imgName"></div>
    <div id="imgDesc"></div>
</div>

标签： javascriptloopsmodal-dialog

解决方案

问题在于您的 onClick 事件侦听器。您正在侦听器中使用该变量i。当任何人单击图像时，循环已完成执行，并且值i变为 3 并且不会更改，并且由于 and 中只有 3 个元素myName，myDesc它会引发错误并停止执行。

您可以使用以下代码：

  let modal = document.getElementById("myModal");
  let i;
  let j;
  let k;

  // Get image
  let img = document.getElementsByClassName("myImg");
  let myName = document.getElementsByClassName("myName");
  let myDesc = document.getElementsByClassName("myDesc");
  let modalImg = document.getElementById("showImg");
  let modalName = document.getElementById("imgName");
  let modalDesc = document.getElementById("imgDesc");

  // Loop through images
  for (i = 0; i < img.length; i++) {
    img[i].onclick = function () {
      modal.style.display = "block";
      modalImg.src = this.src;
      modalName.innerHTML = this.parentElement.getElementsByClassName('myName')[0].innerHTML;
      modalDesc.innerHTML = this.parentElement.getElementsByClassName('myDesc')[0].innerHTML;
    }
  }
// Images
<div>
  <img class="myImg" src="images/1.png" alt="">
  <h5 class="myName">Image name1</h5>
  <p class="myDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quaerat, aut.</p>
</div>

<div>
  <img class="myImg" src="images/2.png" alt="">
  <h5 class="myName">Image name2</h5>
  <p class="myDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quaerat, aut.</p>
</div>

<div>
  <img class="myImg" src="images/3.png" alt="">
  <h5 class="myName">Image name3</h5>
  <p class="myDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, debitis, provident.</p>
</div>

// Modal
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="showImg">
  <div id="imgName"></div>
  <div id="imgDesc"></div>
</div>

this关键字将始终指向单击的图像，因此，使用this.parentElement.getElementsByClassName('myName')[0]将为您提供所需的元素。

推荐阅读