Question

我试图在图片之前和之后显示并点击它们中的任何一个将它们显示为模态。我可以点击每个图像，打开模态窗口并获取图像以填充该模态显示的内容。这项任务似乎适用于第一张图片，但为什么它不适用于其他图片呢？

HTML

var modal = document.getElementById('myModal');
function openModal(){
   var img = document.querySelectorAll("[id^='photoshop']");


   var modalImg = document.querySelectorAll("[class^='modal-content']");
   for (var i = 0; i < img.length; i++){
for (var i = 0; i < modalImg.length; i++){
  modalImg[i].src = img[i].src;
  modal.style.display = "block";
   }
  }
}

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

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

JAVASCRIPT

Value = 27.605 
Value1 = RoundUp(Value, 2)    ' 27.61 
Value2 = RoundDown(Value, 2)  ' 27.6

Answer 1

所有图片都具有相同的ID，所有div都具有相同的ID ....您不能对多个元素使用相同的ID。每个元素的ID都是唯一的。你遇到了问题，因为模态是获取ID的第一个元素的src。

Answer 2

在展示解决方案之前需要注意一些建议和事项：

您不需要为每张图片分配一个模态div。您可以拥有一个将用于所有图像的模态
您不能对不同的元素使用相同的ID。所有元素的ID必须是唯一的
缩进非常重要，使您的代码看起来更清晰，更易于理解。

所以这是解决方案。＆＃39; openModal＆＃39;功能现在有一个＆＃39; img＆＃39;参数，以便使用＆＃39; this＆＃39;您在每个图像的onclick中传递的值。我还使用＆＃39; alt＆＃39;添加了标题。传递给函数的图像中的标记：

var modalDiv = document.getElementById("modalDiv");
function openModal(img){
    var modalImage = document.getElementById("modalImage");
    var modalCaption = document.getElementById("modalCaption");

    modalDiv.style.display = "block";
    modalImage.src = img.src;
    modalCaption.innerText = img.alt;
}

var span = document.getElementById("modalClose");
span.onclick = function() {
    modalDiv.style.display = "none";
}

现在通过删除所有模态以及每个图像的公共ID来清除Html代码。剩下的唯一ID是模态弹出窗口，我们用它来在脚本中添加图像细节。此外，默认情况下，＆＃39;模式＆＃39;被隐藏了：

<img onclick="openModal(this);" src="images/FrenchBefore.jpg" alt="Frenchie Before Photoshop"/>
<img onclick="openModal(this);" src="images/frenchAfter.jpg" alt="Frenchie After Photoshop"/>
<p>Look at the left hand photo of an adorable French Bulldog I passed...</p>

<img onclick="openModal(this);" src="images/fatherBefore.jpeg" alt="Father Before Photoshop"/>
<img onclick="openModal(this);" src="images/fatherAfter.jpeg" alt="Father After Photoshop"/>
<p>Here we have a father and son enjoying a beautiful day in ...</p>

<img onclick="openModal(this);" src="images/beachBefore.jpeg" alt="Beach Before Photoshop"/>
<img onclick="openModal(this);" src="images/beachAfter.jpeg" alt="Beach After Photoshop"/>
<p>This one I had a little more fun with. While there is a spot...</p>


<div id="modalDiv" class="modal" style="display:none;">
  <span id="modalClose" class="close">&times;</span>
  <img id="modalImage" class="modal-content">
  <div id="modalCaption"></div>
</div>

<script src="js/modal.js" type="text/javascript"></script>

希望这有助于您的个人网站！：）

如何正确地将图像源分配给模态图像显示？

2 个答案: