javascript - 重置图像模式以防止显示以前的照片

Question

我的模式有一个问题，它在显示刚刚单击的图像之前显示前一个图像。我相信我需要在关闭时重置模式以防止这种情况发生。

只是为了澄清，模态不会滑到下一个图像。需要关闭它才能选择下一个图像。

我曾尝试在模式关闭时重置 HTML，但它似乎不起作用。

const modal = document.querySelector('.modal');
const previews = document.querySelectorAll('.solution-image-container img');
const original = document.querySelector('.full-img');

previews.forEach(preview => {
  preview.addEventListener('click', () => {
    modal.classList.add('open');
    original.classList.add('open');

    const originalSrc = preview.getAttribute('data-original');
    original.src = originalSrc;
  })
});

modal.addEventListener('click', (e) => {
  if (e.target.classList.contains('modal')) {
    modal.classList.remove('open');
    original.classList.remove('open');
  }

  if (modal.style.opacity === 0) {
    modal.innerHTML = "";
  }
});

.content-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  width: 100%;
}

.solution-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  flex-direction: column;
}

.solution-image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  cursor: pointer;
}

.images-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
  grid-gap: 1rem;
  width: 100%;
}

#gallery-img {
  height: 150px;
  width: 150px;
  object-fit: cover;
}


.modal {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease-out;
}

.modal.open {
  opacity: 1;
  pointer-events: all;
}

.full-img {
  position: absolute;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
}

<div class="content-container">
  <div class="solution-image-container">
      <img class="big-img" 
           src="https://source.unsplash.com/random/350x350" 
           srcset=""
           data-original="https://source.unsplash.com/random/350x350"/>
      <div class="images-gallery">
                  <img
                    id="gallery-img"
                    src="https://source.unsplash.com/random/151x151"
                    alt=""
                    srcset=""
                    data-original="https://source.unsplash.com/random/151x151"
                  />
                  <img
                    id="gallery-img"
                    src="https://source.unsplash.com/random/152x152"
                    alt=""
                    srcset=""
                    data-original="https://source.unsplash.com/random/152x152"
                  />
                  <img
                    id="gallery-img"
                    src="https://source.unsplash.com/random/153x153"
                    alt=""
                    srcset=""
                    data-original="https://source.unsplash.com/random/153x153"
                  />
       </div>
  </div>
</div>
<div class="modal">
  <img alt="" class="full-img" />
</div>

标签： javascript