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

Question

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

HTML

<h4>Photoshop</h4>
<p>
    You should always strive to get the best shots without doing too much in post (if anything at all). But sometimes you find imperfections in your pictures, like a phantom spot due to a blemish on the camera sensor. Sometimes you do not get the color to pop. Your photo is over-exposed. The lighting was poor. So many factors both in and out of your control can prevent you from getting the most out of your pictures. And for situations such as these, proficiency in Photoshop is a must.
</p>
<p>Here are a few examples of how I used to photoshop to enrich my photos! These photos were taken on a Nikon D7100.</p>
<img id="photoshop" onclick="openModal(this);" src="images/frenchBefore.JPG" alt="Frenchie Before Photoshop"/>
<div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
    </div>
<img id="photoshop" onclick="openModal(this);" src="images/frenchAfter.jpeg" alt="Frenchie After Photoshop"/>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
    </div>
    <p>Look at the lefthand photo of an adorable French Bulldog I passed on the street in Chelsea. You can see the color is flat, and the dog has a few belmishes around his mouth and eyes, plus his face is rather dark. With some Photoshop healing and a little adjustment of warmth, saturation, smoothing, shadow and contrast the picture becomes more inviting. I wanted to recreate the warm feeling that I felt when I first saw him. &#9786;</p>
<img id="photoshop" onclick="openModal();" src="images/fatherBefore.jpeg" alt="Father Before Photoshop"/>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
                <div id="caption"></div>
    </div>
<img id="photoshop" onclick="openModal(this);" src="images/fatherAfter.jpeg" alt="Father After Photoshop"/>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
                <div id="caption"></div>
    </div>
    <p>
       Here we have a father and son enjoying a beautiful day in prospect park. This picture was taken using a telephoto 300mm lense from about 150 yards away. The first picture, while the sharpness and focus is precise, the color could still use a little bit of adjustment. I wanted to improve the vibrance of the surrounding foliage and grass, along with the father's hat to show the twead pattern. However, saturation of the clothing proved to be overkill. The red pants, the orange jacket are already bright and vibrant enough. Too much post production would make the colors overwhelming and take away from the warmth and subtley of the image. The picture is of a father and son enjoying a stroll in a park, not a lazer light show!
    </p>
<img id="photoshop" onclick="openModal(this);" src="images/beachBefore.jpeg" alt="Beach Before Photoshop"/>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
                <div id="caption"></div>
    </div>
<img id= "photoshop" onclick="openModal(this);" src="images/beachAfter.jpeg" alt="Beach After Photoshop"/>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
            <img class="modal-content" id="img01">
                <div id="caption"></div>
    </div>
    <p>
        This one I had a little more fun with. While there is a spot from a blemish on my sensor toward the top right of the image against the blue sky, some of these adjustments were made out of experimentation. The spot and the color needed adjustment, but removing the boat in the background through Photoshop healing was more for fun than neccesity.
    </p>
    <script src="js/modal.js" type="text/javascript"></script>

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

Answer 1

展示解决方案前的一些建议和注意事项:

• 您不需要为每张图片都设置模态 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 代码现在通过删除所有模式和每个图像中的公共(public) 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>

希望这对您的个人网站有所帮助! :)