如何使用香草JavaScript更改点击图片

Question

我是编程新手，目前正在学习DOM操作。 我将不胜感激。

我需要将主图片更改为用户单击的任何图片。 我只想使用JavaScript。

我遇到的主要问题是我不知道如何从单击的图像中提取src属性。

 let pics = document.querySelectorAll('.thumbnail'); let pic = document.querySelector('.hero img'); pics.addEventListener('click', function(){ pic = pics.src; }) 

 <main role="main"> <h1>Image Carousel</h1> <div class="hero"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/> </div> <div class="thumbnails"> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/></a> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/></a> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/></a> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/></a> </div> </main> 

Answer 1

您必须获取数组中的所有图像，迭代该数组，并在每个图像中添加一个事件侦听器 ，以获取src属性 。

 let image = document.querySelectorAll('img'); // This is going to return you an array with all the images you have in the document // here we're iterating that array for(let i = 0; i < image.length; i++) { // Here is like selecting each of those items and adding an event listener image[i].addEventListener('click', (e) => { // When you click at the image you will get in console the link of that image console.log(e.target.src); }); } 

  <main role="main"> <h1>Image Carousel</h1> <div class="hero"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/> </div> <div class="thumbnails"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/> </div> </main> 

Answer 2

不幸的是，您不能在元素数组上设置事件侦听器。 您需要遍历所有这些对象并设置侦听器。

let pics = document.querySelectorAll('.thumbnail');
let pic = document.querySelector('.hero img');
for( let x = 0; x <  pics.length; x++ ){
  pics.item( x ).addEventListener('click', function( event ){
    pic.src = this.getElementsByTagName('img')[0].src;
  });
}