Boo 引导模式映像不工作-多个

我只是按照w3school教程来制作这个引导模式图像。我的页面中有两张图像卡。所以我需要弹出这两张图片。但它只处理一个图像

&时代；

---

我在另一张图片中插入了“myImg”id，但它不起作用。第一个图像弹出窗口如我所料工作。此处缺少什么？

Id必须是唯一的，请参见此处的示例

Id必须是唯一的，请参见此处的示例

不能给两个元素提供相同的id 如果你想为两个人做同样的动作，你可以给他们上课

<img class="myImg" src="http://placehold.it/850x450" alt="image1" width="200">
<img class="myImg" src="http://placehold.it/700x400/f00" alt="image2" width="200">

而js将是：

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

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
//iterate over img to add click event for each one,, jquery will make it much easier
for(var i=0;i< img.length;i++){
  img[i].onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
  }
}

//jquery option
/*$('.myImg').on('click', function(){
    modal.style.display = "block";
  modalImg.src = $(this).attr('src');
  captionText.innerHTML = $(this).attr('alt');
})*/

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//获取模式
var modal=document.getElementById（'myModal'）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementsByClassName（'myImg'）；
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
//迭代img，为每个img添加click事件，jquery将使其更容易
对于（变量i=0；i

---

不能为两个元素提供相同的id 如果你想为两个人做同样的动作，你可以给他们上课

<img class="myImg" src="http://placehold.it/850x450" alt="image1" width="200">
<img class="myImg" src="http://placehold.it/700x400/f00" alt="image2" width="200">

而js将是：

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

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
//iterate over img to add click event for each one,, jquery will make it much easier
for(var i=0;i< img.length;i++){
  img[i].onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
  }
}

//jquery option
/*$('.myImg').on('click', function(){
    modal.style.display = "block";
  modalImg.src = $(this).attr('src');
  captionText.innerHTML = $(this).attr('alt');
})*/

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//获取模式
var modal=document.getElementById（'myModal'）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementsByClassName（'myImg'）；
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
//迭代img，为每个img添加click事件，jquery将使其更容易
对于（变量i=0；i

---

页面上的多个元素不能使用同一ID，因为它们是唯一的。但是，如果有帮助的话，您可以使用多个类。为什么这个问题有

boo

标记？您不能在页面上的多个元素上使用相同的ID，因为它们是唯一的。但是，如果有帮助的话，您可以使用多个类。为什么这个问题有

boo

标记？Omg！我只是忘记了HTML的基本功能。谢谢天啊！我只是忘记了HTML的基本功能。谢谢