如何将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”，但我无法想出解决方法。

谢谢。

- user8044950

---

使用 getElementsByClassName 也可以获取图片。 - Agam Banga

尝试为每个<img>元素赋予唯一的ID。 - TejSoft

使用class代替id来处理图片，因为相同的id在处理javascript/jQuery时会引起问题。 - Alive to die - Anant

ID必须唯一。 - Venky

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>

- Kuru

---

@cbeam776，这样你就可以给我一个绿色的勾勾了.. :) - Kuru

Answer 2

Id应该是唯一的。因此，id="myImg1"，id="myImg2等。如果您想重用CSS类，请改用类。所以将其更改为class，使用document.getElementsByClassName选择它们所有，遍历该数组并在所有图像对象上设置事件监听器。

- whatoncewaslost

Answer 3

在HTML文档中，ID应该是唯一的并且只能使用一次。使用类代替。您可以使用document.getElementsByClassName(classname)或document.querySelectorAll(.classname)选择具有特定类的所有元素。然后，您将需要使用for循环遍历返回的HTMLCollection。

- Teemoh