基于当前显示图片切换功能故障排查求助

问题根源 #

你当前的判断逻辑失效，核心原因是：element.style.display只能读取元素的内联style属性，而你的初始display值是写在CSS样式表中的，所以初始状态下image1.style.display是空字符串，根本匹配不上"flex"或"block"，自然所有if判断都不触发，直接走else分支。

方案一：用getComputedStyle获取实际生效样式 #

通过window.getComputedStyle(element).display可以获取元素实际应用的display值（不管样式来自内联还是样式表），修改后的JS代码如下：

function rightImage() {
  const image1 = document.getElementById("stc-parking-map");
  const image2 = document.getElementById("stc-first-floor");
  const image3 = document.getElementById("stc-second-floor");
  const image1Indicator = document.getElementById("directions-image1-indicator");
  const image2Indicator = document.getElementById("directions-image2-indicator");
  const image3Indicator = document.getElementById("directions-image3-indicator");

  // 获取元素实际生效的display值
  const image1Display = window.getComputedStyle(image1).display;
  const image2Display = window.getComputedStyle(image2).display;
  const image3Display = window.getComputedStyle(image3).display;

  if (image1Display === "flex") {
    image1.style.display = "none";
    image2.style.display = "flex";
    image1Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image2Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image2Display === "flex") {
    image2.style.display = "none";
    image3.style.display = "flex";
    image2Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image3Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image3Display === "flex") {
    image3.style.display = "none";
    image1.style.display = "flex";
    image3Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image1Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else {
    console.log("Everything Failed?");
  }
}

function leftImage() {
  const image1 = document.getElementById("stc-parking-map");
  const image2 = document.getElementById("stc-first-floor");
  const image3 = document.getElementById("stc-second-floor");
  const image1Indicator = document.getElementById("directions-image1-indicator");
  const image2Indicator = document.getElementById("directions-image2-indicator");
  const image3Indicator = document.getElementById("directions-image3-indicator");

  const image1Display = window.getComputedStyle(image1).display;
  const image2Display = window.getComputedStyle(image2).display;
  const image3Display = window.getComputedStyle(image3).display;

  // 统一使用flex和初始样式保持一致，避免逻辑混乱
  if (image1Display === "flex") {
    image1.style.display = "none";
    image3.style.display = "flex";
    image1Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image3Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image3Display === "flex") {
    image3.style.display = "none";
    image2.style.display = "flex";
    image3Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image2Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image2Display === "flex") {
    image2.style.display = "none";
    image1.style.display = "flex";
    image2Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image1Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  }
}

方案二：用CSS类控制显示隐藏（更推荐） #

通过添加/移除类来控制显示状态，不需要读取display值，逻辑更简洁易维护：

修改CSS #

新增控制显示隐藏的类，调整初始样式：

/* 新增控制类 */
.directions-image-active {
  display: flex !important;
}

.directions-image-hidden {
  display: none !important;
}

/* 原初始样式调整 */
#stc-parking-map {
  display: flex;
}

#stc-first-floor, #stc-second-floor {
  display: none;
}

/* 其他原有CSS保持不变 */
#visit-us-parking-and-directions-content {
  justify-content: flex-end;
}

.peirce-directions-image {
  width: 100%;
}

#directions-image-change-button-container,
#directions-image-number-indicator-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.directions-image-number-indicator {
  height: 15px;
  width: 33.33%;
  border-right: solid;
  border-color: rgba(224, 224, 219, 1.00);
  background-color: rgba(0, 0, 0, 0.92);
}

.directions-image-number-indicator:first-child {
  border-left: solid;
  border-color: rgba(224, 224, 219, 1.00);
}

#directions-image1-indicator {
  background-color: rgba(37, 53, 81, 1.00);
}

.directions-image-change-button {
  padding: 38px 0 30px 0;
  width: 50%;
  height: 100%;
}

修改JS #

通过索引管理当前激活的图片，直接切换类：

// 初始化当前激活的图片索引（0=第一张，1=第二张，2=第三张）
let currentActiveIndex = 0;
const images = [
  document.getElementById("stc-parking-map"),
  document.getElementById("stc-first-floor"),
  document.getElementById("stc-second-floor")
];
const indicators = [
  document.getElementById("directions-image1-indicator"),
  document.getElementById("directions-image2-indicator"),
  document.getElementById("directions-image3-indicator")
];

function rightImage() {
  // 移除当前激活元素的样式
  images[currentActiveIndex].classList.remove("directions-image-active");
  images[currentActiveIndex].classList.add("directions-image-hidden");
  indicators[currentActiveIndex].style.backgroundColor = "rgba(0,0,0,0.92)";

  // 更新索引，循环切换
  currentActiveIndex = (currentActiveIndex + 1) % 3;

  // 添加新激活元素的样式
  images[currentActiveIndex].classList.remove("directions-image-hidden");
  images[currentActiveIndex].classList.add("directions-image-active");
  indicators[currentActiveIndex].style.backgroundColor = "rgba(37,53,81,1.00)";
}

function leftImage() {
  // 移除当前激活元素的样式
  images[currentActiveIndex].classList.remove("directions-image-active");
  images[currentActiveIndex].classList.add("directions-image-hidden");
  indicators[currentActiveIndex].style.backgroundColor = "rgba(0,0,0,0.92)";

  // 更新索引，处理负数确保在0-2范围内
  currentActiveIndex = (currentActiveIndex - 1 + 3) % 3;

  // 添加新激活元素的样式
  images[currentActiveIndex].classList.remove("directions-image-hidden");
  images[currentActiveIndex].classList.add("directions-image-active");
  indicators[currentActiveIndex].style.backgroundColor = "rgba(37,53,81,1.00)";
}

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