Question

click picture outcome that I want with multiple pictures though

我的任务是解决此问题，但我实在无法把握。我想使用JavaScript放大多张图片。我可以放大一张图片，但是当我尝试其他图片时却没有任何反应。

我尝试将img id设置为一个类，并尝试创建多个不同的id，但是我什么都没做，所以我在这里。

我正在使用W3school的代码

    // Get the modal
    var modal = document.getElementById('myModal');
    
    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
    }
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
    }

    
    img id="myImg"

    #myImg:hover {opacity: 0.7;}
    
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
  

    position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */

  

    padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }
    
    /* Modal Content (image) */
    .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
    }
    
    /* Caption of Modal Image */
    #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
    }
    
    /* Add Animation */
    .modal-content, #caption {  
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
    }
    
    @-webkit-keyframes zoom {
      from {-webkit-transform: scale(0)} 
      to {-webkit-transform: scale(1)}
    }
    
    @keyframes zoom {
      from {transform: scale(0.1)} 
      to {transform: scale(1)}
    }
    
    /* The Close Button */
    .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
    
    /* 100% Image Width on Smaller Screens */
    @media only screen and (max-width: 700px){
      .modal-content {
        width: 100%;
      }
    }

<html>
    <head>
    
    </head>
    <body>
    
    <h2>Image Modal</h2>
    <p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
    <p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
    <p>Don't worry if you do not understand the code right away. When you are done with CSS, go to our JavaScript Tutorial to learn more.</p>
    
    <img id="myImg" src="http://orig03.deviantart.net/558e/f/2013/324/2/7/cute_anime_cat_girl_by_ssyomako-d6uyf48.jpg" alt="Pink hair kitty cat ^-^" width="300" height="200">
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
      <span class="close">×</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    
    
    
    </body>
    </html>

Answer 1

您可以在图片点击时使用onclick事件。所以我在每个图像上都添加了onclick = somefunct（this）。

还要确保将脚本包含在结束body标签的正上方

即

</body>

现在您可以观察到在somefunct中作为参数传递的el是元素本身。

所以我也修改了您

var img = document.getElementById('myImg')

到

var img = el;

也已修改：

    modalImg.src = this.src;
    captionText.innerHTML = this.alt;

到

     modalImg.src = el.src;
     captionText.innerHTML = el.alt;

这是完整的工作流程之一：

    </head>
    <body>

    <h2>Image Modal</h2>
    <p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
    <p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
    <p>Don't worry if you do not understand the code right away. When you are done with CSS, go to our JavaScript Tutorial to learn more.</p>

    <img id="myImg" src="http://orig03.deviantart.net/558e/f/2013/324/2/7/cute_anime_cat_girl_by_ssyomako-d6uyf48.jpg" alt="Pink hair kitty cat ^-^" width="300" height="200" onclick="somefunct(this)">

    <img id="myImg2" src="https://pbs.twimg.com/profile_images/875749462957670400/T0lwiBK8_400x400.jpg" width="300" height="200"  onclick=somefunct(this)>

    <!-- The Modal -->
    <div id="myModal" class="modal">
      <span class="close">×</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>

    <script>
    // Get the modal
    function somefunct (el) {
            var modal = document.getElementById('myModal');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
        console.log(el);
    var img = el;
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    modal.style.display = "block";
      modalImg.src = el.src;
      captionText.innerHTML = el.alt;
    /* img.onclick = function(){

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

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

    </body>
 </html>

Answer 2

这是使用onclick的有效解决方案。您必须将图片ID动态传递到脚本中。希望这对您的学习有所帮助。

 function openModal(id) {
   // Get the modal
    var modal = document.getElementById('myModal');
    
    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById(id);
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");

      modal.style.display = "block";
      modalImg.src = img.src;
      captionText.innerHTML = img.alt;
          // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
    }

}

    img:hover {opacity: 0.7;}
    
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
  

    position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */

  

    padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }
    
    /* Modal Content (image) */
    .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
    }
    
    /* Caption of Modal Image */
    #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
    }
    
    /* Add Animation */
    .modal-content, #caption {  
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
    }
    
    @-webkit-keyframes zoom {
      from {-webkit-transform: scale(0)} 
      to {-webkit-transform: scale(1)}
    }
    
    @keyframes zoom {
      from {transform: scale(0.1)} 
      to {transform: scale(1)}
    }
    
    /* The Close Button */
    .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
    
    /* 100% Image Width on Smaller Screens */
    @media only screen and (max-width: 700px){
      .modal-content {
        width: 100%;
      }
    }

<html>
    <head>
    
    </head>
    <body>
    
    <h2>Image Modal</h2>
    <p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
    <p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
    <p>Don't worry if you do not understand the code right away. When you are done with CSS, go to our JavaScript Tutorial to learn more.</p>
    
    <img id="myImg1" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" alt="Pink hair kitty cat ^-^" width="300" height="200" onclick="openModal(this.id)">
        <img id="myImg2" src="https://www.gstatic.com/webp/gallery/2.jpg" alt="Black hair kitty cat ^-^" width="300" height="200" onclick="openModal(this.id)">
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
      <span class="close">×</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    
    
    
    </body>
    </html>

如何使用JavaScript放大图片

2 个答案: