Javascript 打开多个不同的iframe

我在我的网站上有很多图片，通过每个图片，你可以打开一个不同的iframe，其中包括一个与你打开图片的地方相关的互动广告。 问题是，使用我正在使用的代码，我只能打开第一个iframe。 这里是我的网站的一个演示，以及我正在尝试做的事情。您可以看到，如果单击图像，您将只能打开第一个iframe：

我想知道是否有人能帮我解决这个问题

我使用的JS代码如下：

<script>
    // Get the modal
    var modal = document.getElementById('MyModal');

    // Get the button that opens the modal
    var div = document.getElementById("myDiv");

    // Get the button that opens the modal
    var img = document.getElementById("myImg");

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

    // When the user clicks on the button, open the modal 
    div.onclick = function() {
        modal.style.display = "block";
    } 

    // When the user clicks on the button, open the modal 
    img.onclick = function() {
        modal.style.display = "block";
    }  

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    var freezeVp = function(e) {
        e.preventDefault();
    }; 
</script>

下面是图像如何打开iframe的演示：

 <div id="ad1" class="portfolio-item deporte col-md-3">
     <div class="portfolio-box">
         <div class="portfolio-image-wrap">
             <img id="myImg" src="img/portfolio/image.jpg" alt="" />
         </div>
         <div class="portfolio-caption-mask" id="myDiv">
             <div class="portfolio-caption-text">
                 <div class="portfolio-caption-tb-cell">
                     <h5 class="alt-title">Puzzle ad</h5>
                     <p>Nike Made to fly</p>
                 </div>
             </div>
         </div>
     </div>
 </div>
 <div id="MyModal" class="modal">
     <span class="close">&times;</span>
     <div class="contenido">
         <iframe style="height: 480px; width: 320px" src="http://kickads.mobi/test/ad" frameborder="0"></iframe>
     </div>
 </div> 

---

正如前面所说的，不能使用相同的ID调用多个元素。 两个元素不能具有相同的ID

如果要在同一变量中分配多个元素，我建议您使用：var div=document.getelementsbyclassname；

---

更多详细信息。

查看了您的实时站点。首先，有3个元素具有相同的id，不能这样做。你需要唯一的id。基于上面的js，您失败了，因为您只获得了具有该id的第一个元素，其他什么都没有。所以你从来没有一个点击监听器。我试图复制js并使用其他id，但没有成功！我所做的是，首先在每个图像和iframe中放置另一个id，然后复制js并替换id。这一切都不起作用！我尝试使用类名而不是ID，但没有成功。什么也没发生。如果我更改每个img和每个div的ID怎么办？我可以为每个元素复制JS吗？可能我说错了。您不能只更改document.getElementsById和document.getElementsByCassName，我建议您阅读我在前面的回答中提供给您的文档，以了解它们之间的区别。document.getElementsByClassNamename；将调用class=name的所有元素。这就是我说的在同一个变量中分配多个元素的意思。是的，如果元素都有唯一的ID，您可以通过ID调用元素，但我建议编辑您的脚本并创建一个循环来针对每个广告。好的，我会尝试！因为每个图像打开一个不同的iframe，这就是为什么我认为通过给每个元素分配一个不同的ID，它会起作用。我现在将阅读您发布的内容，然后我将尝试更改我的脚本。非常感谢。嗯，我发现我不知道如何写剧本来完成你告诉我的！还有更简单的方法吗？您好，我们再次回答了您关于您提供给我们的代码问题的问题。如果您还有其他问题，您应该打开另一个线程；。如果您想向我们提供您的代码，请使用fiddle选项并包含您使用的所有代码，而不是链接您的网站，以便我们提供帮助=。