单击时切换多个图像

Question

我的代码设置为在单击所述图像后图像可以更改。 我了解 getElementById 旨在从一个 class 名称中获取结果，但我不知道如何对此进行扩展，并且在不更改 class 名称的情况下获得相同的结果。 我试过querySelector ，但我想我错过了一些东西。 任何帮助，将不胜感激。 我也有我的代码。

<!--image area or main img-->

    <div class="row">
    <div class="column">
    
    <img id="img-area" src='Kabuto.jpg' class="responsive" alt="" onclick="changeImage()" height="200" with="200">
    <button class="first" onclick="document.getElementById('img-area').src='PersonalCreations/LylatForce.jpg'">Change Image</button>
     </div> 
    <div class="column">
    <img id="star-picture" src="Kabuto.jpg" height="200" with="200"/>
    <button onclick="document.getElementById('star- 
       picture').src='PersonalCreations/Year6969.jpg'">Change Image</button>
    </div>     
    <div class="column">
        <img id="colorful" src="Kabuto.jpg" height="200" with="500"/>
    <button onclick="document.getElementById('colorful').src='PersonalCreations/BallInTheShoeProductions.jpg'">Change Image</button>
      </div>

    <div class="column">
    <img id="holiday" src='Kabuto.jpg' alt="" onclick="changeImage()" height="200" with="200">
    <button  onclick="document.getElementById('holiday').src='PersonalCreations/ChristmasFestivalProject.jpg'">Change Image</button>
     </div>    
</div>
<p>Hello World</p>

<script src="imgchanger.js"></script>

<script>
 <!--how do I make this apply to all images?-->
    function changeImage(){
      let displayImage = document.querySelector ('#img-area, #star-picture, #colorful')
      
      if(displayImage.src.match('Kabuto.jpg')){
         displayImage.src = 'PersonalCreations/LylatForce.jpg'
        
      } else{
         displayImage.src='Kabuto.jpg'    
        }
    }

</script>

Answer 1

首先，CSS 样式和 JavaScript 不应与 HTML 内联使用。 你应该把这些东西分开。

你的问题是你有：

let displayImage = document.querySelector ('#img-area, #star-picture, #colorful')

但是， .querySelector()只会返回第一个匹配的元素。 您需要.querySelectorAll() ，它将返回所有匹配元素的集合。

或者，您可以避免所有这些并执行以下操作：

 // Set up a single event handler for all clicks in the document document.addEventListener("click", function(evt){ // But test to see if the click originated at a button if(evt.target.nodeName === "BUTTON"){ // Get the button's parent div and then the source of the first img within that let img = evt.target.closest("div").querySelector("img").src; // Find out which button was clicked by looking at its class switch (evt.target.className){ case "first": // Change the source img = "PersonalCreations/LylatForce.jpg"; break; case "second": img = "PersonalCreations/Year6969.jpg"; break; case "third": img = "PersonalCreations/BallInTheShoeProductions.jpg"; break; case "fourth": img = "PersonalCreations/ChristmasFestivalProject.jpg"; break; } console.clear(); console.log("Image source is now: " + img); } });;

 .img200x200 { height:200px; width:200px; }.img200x500 { height:200px; width:500px; }

 <?-- See how much cleaner the HTML is now that the CSS and JavaScript have been separated out. --> <div class="row"> <div class="column"> <img src="Kabuto.jpg" class="responsive img200x200" alt=""> <button class="first">Change Image</button> </div> <div class="column"> <img src="Kabuto.jpg" class="responsive img200x200" alt=""> <button class="second">Change Image</button> </div> <div class="column"> <img src="Kabuto.jpg" class="responsive img200x500" alt=""> <button class="third">Change Image</button> </div> <div class="column"> <img src="Kabuto.jpg" class="responsive img200x200" alt=""> <button class="fourth">Change Image</button> </div> </div> <p>Hello World</p>