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

Question

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

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

发现一个问题 - 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>

Answer 1

问题出在您的 onClick 事件监听器上。您正在监听器中使用变量i。当任何人单击图像时，循环已完成执行，i 的值变为 3 并且不会更改，因为您的 myName 中只有 3 个元素，并且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] 将为您提供所需的元素。