图片双向切换Toggle效果失效，求助实现点击切换修图前后图片逻辑

你的问题核心是原swap函数为单向替换逻辑（删除旧图、添加新图），未保留切换状态，且onToggle并非标准DOM事件，因此无法实现双向切换。下面提供两种简洁的可行方案：

方案一：单图片元素双向切换（推荐） #

无需修改原有HTML结构，仅调整JS逻辑，通过交换src和data-secondImg属性实现双向切换，同时保留淡入过渡效果。

修改后的JS代码 #

/** 
 * 双向切换图片，带淡入过渡效果
 */
function swap(t) {
  // 缓存当前图片的源地址和备用地址
  const currentSrc = t.src;
  const backupSrc = t.getAttribute('data-secondImg');

  // 交换两个地址，实现下次点击切回原图
  t.src = backupSrc;
  t.setAttribute('data-secondImg', currentSrc);

  // 重置并触发淡入动画
  t.classList.remove('fade-in');
  // 强制浏览器重绘，确保动画重新生效
  void t.offsetWidth;
  t.classList.add('fade-in');
}

配套CSS（实现淡入效果） #

img {
  cursor: pointer;
  transition: opacity 0.5s ease;
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

方案二：双图片元素叠加切换 #

适合需要预加载两张图片的场景，通过切换元素的显示状态实现双向切换，过渡更流畅。

修改后的HTML #

<div class="no-select imgBx col post-box" id="box_1" onClick="swapContainer(this)">
  <img src="./assets/img/prima-dopo/ferrero-prima.jpg" class="active" alt="修图前">
  <img src="./assets/img/prima-dopo/ferrero-dopo.jpg" alt="修图后">
</div>

JS代码 #

/** 
 * 切换容器内的两张图片显示状态
 */
function swapContainer(container) {
  const imgs = container.querySelectorAll('img');
  imgs.forEach(img => img.classList.toggle('active'));
}

配套CSS #

.imgBx {
  position: relative;
  width: fit-content;
  height: fit-content;
}

.imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  cursor: pointer;
}

.imgBx img.active {
  opacity: 1;
  position: static; /* 保持正常文档流，避免容器塌陷 */
}

原问题原因分析 #

1. 原swap函数直接删除旧图片元素，导致后续无触发点击的元素，无法实现反向切换；
2. onToggle并非标准DOM事件，浏览器无法识别，因此完全无效。

内容的提问来源于stack exchange，提问作者Biyou Scherma