javascript - 为什么只有我的第一个模态按预期加载？

Question

我是编程的初学者，我有一个小问题。我有六个模态图像，但只有一个加载正确。我的错误在哪里？我该如何更改我的代码？

我尝试使用 for 循环，但它不再发生。

我正在使用document.getElementsByClassName('myImages')，但它不会再次发生。

这是我的 HTML 和 JavaScript 代码：

var modal = document.getElementById('myModal');
var img = document.getElementsByClassName('myImages');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
  var img = images[i];
  // and attach our click listener for this image.
  img.onclick = function(evt) {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  }
}
var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
  modal.style.display = "none";
}

<div class="row">

  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

    <img src="pictures/r.jpg" class="myImages" id="myImg" style="width:100%;max-width:300px">
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    <p>Mъжка тениска</p>
    <button type="button" class="btn btn-primary">Buy</button>

  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

    <img src="pictures/q.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    <p>Тениска Playboy</p>
    <button type="button" class="btn btn-primary">Buy</button>

  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

    <img src="pictures/w.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    <p>Mъжка тениска</p>
    <button type="button" class="btn btn-primary">Buy</button>

  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

    <img src="pictures/e.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    <p>Mъжка тениска</p>
    <button type="button" class="btn btn-primary">Buy</button>

  </div>

</div>
<!----------------------------------------------------------------------------------------->
<div class="row">

  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

    <img src="pictures/1.jpeg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    <p>Mъжка тениска</p>
    <button type="button" class="btn btn-primary">Buy</button>

  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

    <img src="pictures/2.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    <p>Тениска Playboy</p>
    <button type="button" class="btn btn-primary">Buy</button>

  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

    <img src="pictures/3.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    <p>Mъжка тениска</p>
    <button type="button" class="btn btn-primary">Buy</button>

  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

    <img src="pictures/e.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    <p>Mъжка тениска</p>
    <button type="button" class="btn btn-primary">Buy</button>

  </div>

</div>
<div class="Socials">
  <br>
  <a href="https://www.facebook.com" target="_blank" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
</div>
</div>

标签： javascripthtmltwitter-bootstrap-3