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

我正在尝试显示前后的图片，单击其中任何一个都会将其显示为模式。我能够点击每个图像，打开模式窗口，并获得一个图像来填充模式显示的内容。作业似乎对第一幅图像有效，但为什么对其他图像无效

HTML

Photoshop 你应该一直努力获得最好的投篮机会，而不必做太多的后置动作（如果有的话）。但有时你会发现照片中有瑕疵，比如由于相机传感器上的瑕疵而产生的幻影斑点。有时，你没有得到流行的颜色。你的照片曝光过度了。灯光很差。有太多的因素，无论是在你的控制之内还是之外，都会使你无法充分利用你的照片。在这种情况下，必须熟练使用Photoshop。

这里有几个例子，我如何使用photoshop来丰富我的照片！这些照片是在尼康D7100上拍摄的

&时代； &时代； &时代； &时代； &时代； &时代； JAVASCRIPT

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";
 }

var modal=document.getElementById（'myModal'）；
函数openModal（）{
var img=document.querySelectorAll（“[id^='photoshop']”）；
var modalImg=document.queryselectoral（“[class^='modal-content']”）；
对于（变量i=0；i

所有图像都有相同的ID，所有div都有相同的ID。。。。不能对多个元素使用相同的ID。ID意味着每个元素都是唯一的。您遇到了问题，因为模态采用了ID的第一个元素的src。

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

• 对于每个图像，您不需要有一个模态div。您可以有一个用于所有图像的模式
• 不能对不同的元素使用相同的ID。ID对于所有元素都必须是唯一的
• 缩进非常重要，它可以使代码看起来更清晰、更容易理解

这就是解决方案。“openModal”函数现在有一个“img”参数，以便使用在每个图像的onclick中传递的“this”值。我还使用传递给函数的图像中的“alt”标记添加了标题：

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";
}

Html代码现在通过从每个图像中删除所有modals和公共ID来清理。剩下的唯一ID是模式弹出窗口，我们使用它在脚本中添加图像细节。默认情况下，“模态”也是隐藏的：

<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>

看我经过的一只可爱的法国斗牛犬的左手照片

在这里，我们有一对父子在……度过了美好的一天

这个我玩得更开心了。虽然有一个点

&时代；

---

希望这对您的个人网站有所帮助！：）

试着以问题的形式发布你的问题，并尽量保持简短（问题）。哇。非常感谢你！当然，我不希望得到那么多帮助！我想我最初设置了所有具有相同id的图像，这样就可以很容易地将样式应用于模态功能，但现在我发现这是违反直觉的，并且会弄乱我的代码。在我加入训练营之前我就开始了这项工作，所以现在我们正在研究JS，所以我决定加倍努力，这非常有帮助。非常感谢。很乐意帮忙：）祝你训练营好运！

<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>