Javascript-如何选择从数组加载的图像

Question

因此，我有四个图像是使用循环从数组中放到页面上的。现在，页面上有四个图像，但是我正在寻找一种方法，允许用户单击任何图像，并显示他们单击的图像的大版本。我正在考虑使用一个新的空数组，使用推？来存储单击的图像，但是我不知道如何单击图像（因为我没有使用img标签）并加载被单击的图像。

2

Answer 1

您可以将onClick事件添加到图像节点。

通过onClick函数处理选择图像逻辑。在我的示例中，selectedImage变量存储所选的网址。

查看工作示例：

const images = [
  "1.jpg",
  "2.jpg",
  "3.jpg",
  "4.jpg",
]; 

let selectedImage = null;

const result = document.getElementById('result');
const container = document.getElementById('container');

const onClick = function() {
  selectedImage = this['data-url']; // or this.src
  
  // just for showing output in html
  result.innerText = selectedImage;
};

// on Init
for (let i = 0; i < images.length; i++) {
  const fmg = document.createElement('img');
  fmg.setAttribute("src", images[i]);
  fmg.setAttribute("class", "fmss");
  fmg.setAttribute("alt", images[i]);
  fmg.onclick = onClick;
  fmg['data-url'] = images[i];
  container.appendChild(fmg);
}

.fmss { border: 2px solid black; margin: 10px; }
.result { margin: 20px; } 

Click me
<div id="container"></div>
<div id="result"></div>

Answer 2

不需要数组。只需将大图片的src设置为点击图片的src。

let main = document.getElementById("main");  // Get reference to main image

// Set up click event handler on thumbnail container
document.addEventListener("click", function(event){
  // Check to see if the clicked element is a thumbnail
  if(event.target.classList.contains("thumb")){
    main.src = event.target.src;  // Set main picture to match the thumbnail
  }
});

.thumb { width:40px; }
#main { width:125px; }

<div id="picContainer">
  <img src="https://spectator.imgix.net/content/uploads/2015/06/Emoji.jpg?auto=compress,enhance,format&crop=faces,entropy,edges&fit=crop&w=620&h=413" class="thumb">
  <img src="https://i.pinimg.com/originals/43/7b/9b/437b9bbf3fde6d6a331b52bf6c422850.jpg" class="thumb">
  <img src="https://cdn3.volusion.com/ghfyz.wgnwv/v/vspfiles/photos/LOF-A3-3650-2.gif" class="thumb">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQisqxRpIXDaOgpdYoy_4UgSKLjaFXM6qIEa4zAOjFIsh_Plp5R" class="thumb">
</div>
<img id="main" src="">