javascript - 如何将 JavaScript 函数应用于多个图像

Question

我正在尝试创建一个图片库，所以当我点击每张图片时，它会在页面上方打开，并在下方显示标题。

我让它适用于页面上的第一张图片，但不知道如何将它应用到其余图片。这是我的 HTML:

<div class="col-md-4">
  <div>
    <a href="#projects">
       <img id="myImg" src="http://qlip.in/images/webbrandaxis.jpg" 
       alt="placeholder" style="width:100%; padding-bottom: 1em">
    </a>
  </div>
</div>
<div class="col-md-4">
  <div>
    <a href="#projects">
       <img id="myImg" src="http://qlip.in/images/webbrandaxis.jpg" 
       alt="placeholder" style="width:100%; padding-bottom: 1em">
    </a>
  </div>
</div>
<div class="col-md-4">
  <div>
    <a href="#projects">
       <img id="myImg" src="http://qlip.in/images/webbrandaxis.jpg" 
       alt="placeholder" style="width:100%; padding-bottom: 1em">
    </a>
  </div>
</div>

<!-- Modal -->

<div id="myModal" class="modal" class="close"onclick="document.getElementById('myModal').style.display='none'">
 <img class="modal-content" id="img01">
 <div id="caption"></div>
</div>

这是我的 JavaScript:

var modal = document.getElementById('myModal'); // Get modal

var img = document.getElementById('myImg'); // Get img for modal
var modalImg = document.getElementById("img01"); // Place image in modal
var captionText = document.getElementById("caption"); // Use alt for caption

img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;      
  captionText.innerHTML = this.alt;
}

var close = document.getElementsByClassName("close")[0];

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

我认为这是因为 JavaScript 只使用它遇到的第一个“id”，但我想不出解决这个问题的方法。

谢谢

Answer 1

试试这个。
创建一个函数并在图像元素的 onClick 中调用它。

var modal = document.getElementById('myModal'); // Get modal

var img = document.getElementById('myImg'); // Get img for modal
var modalImg = document.getElementById("img01"); // Place image in modal
var captionText = document.getElementById("caption"); // Use alt for caption

/*img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;      
  captionText.innerHTML = this.alt;
}*/
function showImg(ele){
modal.style.display = "block";
  modalImg.src = ele.src;      
  captionText.innerHTML = ele.alt;
}
var close = document.getElementsByClassName("close")[0];

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-4">
  <div>
    <a href="#projects">
       <img id="myImg" onclick="showImg(this);" src="http://qlip.in/images/webbrandaxis.jpg" 
       alt="placeholder" style="width:100%; padding-bottom: 1em">
    </a>
  </div>
</div>
<div class="col-md-4">
  <div>
    <a href="#projects">
       <img id="myImg" onclick="showImg(this);" src="http://qlip.in/images/webbrandaxis.jpg" 
       alt="placeholder" style="width:100%; padding-bottom: 1em">
    </a>
  </div>
</div>
<div class="col-md-4">
  <div>
    <a href="#projects">
       <img id="myImg" onclick="showImg(this);" src="http://qlip.in/images/webbrandaxis.jpg" 
       alt="placeholder" style="width:100%; padding-bottom: 1em">
    </a>
  </div>
</div>

<!-- Modal -->

<div id="myModal" class="modal" class="close" onclick="document.getElementById('myModal').style.display='none'">
 <img class="modal-content" id="img01">
 <div id="caption"></div>
</div>