如何修复javascript代码以识别所有单击的照片_Javascript

如何修复javascript代码以识别所有单击的照片

javascript

如何修复javascript代码以识别所有单击的照片,javascript,Javascript,我正在使用这个由Traversy Media创建的幻灯片，但试图修改它，使缩略图位于主图片的顶部和底部。顶部的缩略图工作正常，但单击时无法识别底部的一行缩略图。是否可以将这些缩略图向上拆分，或者它们都必须位于同一个div中这只是识别前4张图像，而不是最后4张这是一把小提琴图库 .集装箱{ 最大宽度：760像素；保证金：自动；边框：#fff实心3px；背景：#fff； } .主要img img， .imgs img{ 宽度：100%； } .imgs{ 显示：网格；网格模板列：重

我正在使用这个由Traversy Media创建的幻灯片，但试图修改它，使缩略图位于主图片的顶部和底部。顶部的缩略图工作正常，但单击时无法识别底部的一行缩略图。是否可以将这些缩略图向上拆分，或者它们都必须位于同一个div中

这只是识别前4张图像，而不是最后4张

这是一把小提琴


图库
.集装箱{
最大宽度：760像素；
保证金：自动；
边框：#fff实心3px；
背景：#fff；
}
.主要img img，
.imgs img{
宽度：100%；
}
.imgs{
显示：网格；
网格模板列：重复（4，1fr）；
网格间距：5px；
}
.imgs img{
光标：指针；
}
/*淡入动画*/
@关键帧淡入淡出{
到{
不透明度：1；
}
}
.淡入{
不透明度：0；
动画：FadeinVar（--FadeTime）向前移动1次；
}
/*媒体查询*/
@介质（最大宽度：600px）{
.imgs{
网格模板列：重复（2，1fr）；
}
}
const current=document.querySelector（“#current”）；
const imgs=document.querySelector（'.imgs'）；
const img=document.queryselectoral（'.imgs img'）；
常数不透明度=0.6；
//设置第一个img不透明度
img[0]。style.opacity=不透明度；
imgs.addEventListener（“单击”，imgClick）；
函数imgClick（e）{
//重置不透明度
img.forEach（img=>（img.style.opacity=1））；
//将当前图像更改为已单击图像的src
current.src=e.target.src；
//添加淡入类
current.classList.add（'fade-in'）；
//5秒后移除淡入课堂
setTimeout（（）=>current.classList.remove（'fade-in'），500）；
//将“不透明度”更改为“不透明度变量”
e、 target.style.opacity=不透明度；
}
问题在于document.querySelector（'.imgs'）
仅返回该类的第一个匹配项，以修复可以使用的。querySelectorAll（）
，但返回的将是一个节点列表，应该迭代以将事件添加到所有元素中
但这会留下我所看到的不良行为，在图像之间点击会触发事件并“破坏”画廊
为了避免这种情况，我只将eventListener添加到current.classList.remove（'fade-in'），500）；
//将“不透明度”更改为“不透明度变量”
e、 target.style.opacity=不透明度；
}
.container{
最大宽度：760像素；
保证金：自动；
边框：#fff实心3px；
背景：#fff；
}
.主要img img，
.imgs img{
宽度：100%；
}
.imgs{
显示：网格；
网格模板列：重复（4，1fr）；
网格间距：5px；
}
.imgs img{
光标：指针；
}
/*淡入动画*/
@关键帧淡入淡出{
到{
不透明度：1；
}
}
.淡入{
不透明度：0；
动画：FadeinVar（--FadeTime）向前移动1次；
}
/*媒体查询*/
@介质（最大宽度：600px）{
.imgs{
网格模板列：重复（2，1fr）；
}
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thumbgallery</title>

<style type=text/css>
.container {
  max-width: 760px;
  margin: auto;
  border: #fff solid 3px;
  background: #fff;
}

.main-img img,
.imgs img{
  width: 100%;
}

.imgs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

.imgs img {
  cursor: pointer;
}

/* Fade in animation */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn var(--fade-time) ease-in 1 forwards;
}

/* Media Queries */
@media(max-width: 600px) {
  .imgs {
    grid-template-columns: repeat(2, 1fr);
  }
}
<style>
</head>
<body>

<div class="container">

    <div class="imgs">
        <img src="https://preview.ibb.co/gxVppG/img1.jpg">
    <img src="https://preview.ibb.co/iZ3Lww/img2.jpg">
    <img src="https://preview.ibb.co/iQsPOb/img3.jpg">  
    <img src="https://preview.ibb.co/gFFdib/img4.jpg">  
    </div>

    <div class="main-img">
    <img src="https://preview.ibb.co/gxVppG/img1.jpg" id="current">
  </div>

  <div class="imgs">
    <img src="https://preview.ibb.co/hS5ppG/img5.jpg">
    <img src="https://preview.ibb.co/goKtGw/img6.jpg">
    <img src="https://preview.ibb.co/bSWjOb/img7.jpg">
    <img src="https://preview.ibb.co/i2o9pG/img8.jpg">
  </div>


</div>

    <script>
const current = document.querySelector('#current');
const imgs = document.querySelector('.imgs');
const img = document.querySelectorAll('.imgs img');
const opacity = 0.6;

// Set first img opacity
img[0].style.opacity = opacity;

imgs.addEventListener('click', imgClick);

function imgClick(e) {
  // Reset the opacity
  img.forEach(img => (img.style.opacity = 1));

  // Change current image to src of clicked image
  current.src = e.target.src;

  // Add fade in class
  current.classList.add('fade-in');

  // Remove fade-in class after .5 seconds
  setTimeout(() => current.classList.remove('fade-in'), 500);

  // Change the opacity to opacity var
  e.target.style.opacity = opacity;
}
</script>

</body>
</html>