图片网格点击切换异常：无法恢复主图初始状态（Logo无法隐藏）求助

问题根源 #

你的JavaScript逻辑错误，导致第二次点击无法还原初始状态。原代码通过index循环切换状态，但每个.image-wrapper下仅有两张图片（主图+Logo），当index从1回到0时，else if分支会错误地将Logo的opacity设为0.5而非0，同时未正确匹配“主图opacity=1、Logo opacity=0”的初始状态。

修复方案 #

改用布尔变量跟踪状态，直接对应两种交互场景，逻辑更清晰且符合需求：

const imageWrappers = document.querySelectorAll('.image-wrapper');

imageWrappers.forEach(wrapper => {
  const mainImage = wrapper.querySelector('img:not(.hover-image)');
  const logoImage = wrapper.querySelector('.hover-image');
  let isLogoVisible = false; // 初始状态：Logo隐藏

  wrapper.addEventListener('click', () => {
    isLogoVisible = !isLogoVisible; // 切换状态

    if (isLogoVisible) {
      // 第一次点击：主图半透明，Logo显示
      mainImage.style.opacity = 0.5;
      logoImage.style.opacity = 1;
    } else {
      // 第二次点击：恢复初始状态
      mainImage.style.opacity = 1;
      logoImage.style.opacity = 0;
    }
  });
});

代码说明 #

• 直接通过选择器区分主图和Logo，避免遍历所有图片的冗余操作
• 用isLogoVisible布尔变量明确跟踪当前状态，每次点击翻转状态
• 分支逻辑完全匹配你预期的两种交互效果，避免模棱两可的索引计算

验证效果 #

点击图片容器：

1. 第一次点击：主图opacity变为0.5，Logo完全显示（opacity=1）
2. 第二次点击：主图恢复opacity=1，Logo隐藏（opacity=0）

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