时间戳

首页 > 解决方案 > 如何修复javascript代码以识别所有点击的照片

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

问题描述

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

这仅识别前 4 个图像，而不是后 4 个图像。

这是一个小提琴

小提琴

<!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>

标签： javascript

解决方案

问题是document.querySelector('.imgs');只返回该类的第一个匹配项，以修复.querySelectorAll()可以使用的问题，但返回将是一个 NodeList 应该迭代以将事件添加到所有元素。

但这会留下我看到的不良行为，当在图像之间单击将触发事件并“破坏”图库时。

所以为了避免这种情况，我只将 eventListener 添加到<img>s.

Snipet 与下面的解决方案。

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

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

// Iterating over result to add the eventListeners
img.forEach(i => i.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;
}
.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);
  }
}
<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>

推荐阅读