我页面上的多个模式显示相同的图像答案

【问题标题】：multiple modals on my page shows the same images我页面上的多个模式显示相同的图像
【发布时间】：2018-04-05 02:03:14
【问题描述】：

我一直在研究试图弄清楚它为什么这样做，也许我只是不了解模态。 IDK。

无论如何，我从一个灯箱开始：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox

并将正文更改为：

<body>
    <h2 style="text-align:center">Title</h2>
    <div class="row">
      <div class="column">
        <img src="img_nature.jpg" style="width:100%"                     
             onclick="openModal();currentSlide(1)" 
             class="hover-shadow cursor">
      </div>
    </div>

    <div id="myModal" class="modal">
     <span class="close cursor" onclick="closeModal()">&times;</span>
     <div class="modal-content">

         <div class="mySlides">
             <div class="numbertext">1 / 4</div>
             <img src="img_nature_wide.jpg" style="width:100%">
         </div>

         <div class="mySlides">
             <div class="numbertext">2 / 4</div>
             <img src="img_fjords_wide.jpg" style="width:100%">
         </div>

         <div class="mySlides">
             <div class="numbertext">3 / 4</div>
             <img src="img_mountains_wide.jpg" style="width:100%">
         </div>

         <div class="mySlides">
             <div class="numbertext">4 / 4</div>
             <img src="img_lights_wide.jpg" style="width:100%">
         </div>

         <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
         <a class="next" onclick="plusSlides(1)">&#10095;</a>

         <div class="caption-container">
             <p id="caption"></p>
         </div>
     </div>
</div>

在模式中创建单个图像，并滚动浏览它。我喜欢它，我认为它会解决我的问题。唉

当我在我的网页中实现它时，它起作用了。但后来我复制并粘贴，它在页面的另一个区域，改变了图像，但它仍然显示来自第一个模态的原始图像。所以我不知道该转向哪里。

我在 jscript、jquery 方面有 0 经验。（这些课程还没有在我的学校上课......）。

我在想：
1.) 在外部 html 页面上有图像并导入我看过 AJAX，但我很困惑。（不一定要使用引导程序）

我查看了这些资源，它们有点帮助，但我不知道如何根据我的需要制作它们。

using Bootstrap
modals, nonimported html
modals

请参阅 CodePen 上 Michael Barnhouse (@Kardee785) 的 Pen Work issue。

【问题讨论】：

它显示相同的图像，因为您的<img src 属性值是相同的。如果您想显示不同的图像，您的src 属性需要不同，例如img_nature_wide1.jpg、img_nature_wide2.jpg、img_nature_wide3.jpg 等...确保该值与您的图像文件名匹配，否则将不会加载图片。
是的，我明白，我确实更改了 ie。 blah blah 但它总是会以 zelda1.png 的模式显示图像
我添加了我的代码结构的代码笔引用，我无法加载图像，但 src 不同（也只有前 3 段传输是唯一具有模态的) 显示相同的图像
新的.modal 元素的id 属性是否唯一？
在所有 3 种模式上都是相同的。我假设这只是称为 div“我的模态”并将模态的 css 应用于它。真的这么简单吗？更新试图将
更改为
和
它坏了模态，图像不再显示

标签： javascript html css modal-dialog

【解决方案1】：

正如好奇 13 和 Nate Whittaker 建议的那样，我需要让每个部分都有自己唯一的 ID。我已经发布了那不起作用，它不起作用的原因是因为我的 .js 没有读取/导入要显示的内容。所以只好在js中创建一个var（命名为modalId），然后调用那个信息到modal的开启、关闭、导航中。

这是 .js，我让我的一位朋友帮助我。

function openModal(modalId) {
  document.getElementById(modalId).style.display = "block";
}

function closeModal(modalId) {
  document.getElementById(modalId).style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(modalId, n) {
  showSlides(modalId, slideIndex += n);
}

function currentSlide(modalId, n) {
  showSlides(modalId, slideIndex = n);
}

function showSlides(modalId, n) {
  var i;
  var modal = document.getElementById(modalId);
  var slides = modal.getElementsByClassName("mySlides");
  var captionText = document.getElementById("caption");

  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

【讨论】：