如何实现点击触发的图片互斥显示（显示一个隐藏另一个）

首先，我们需要修改你的AfficherCacher函数，确保每次操作目标图片时自动隐藏另一张图片。以下是完整的可运行代码示例：

HTML 结构 #

<!-- 触发点击的图片按钮 -->
<img src="trigger-btn-1.png" onclick="AfficherCacher('image1')" alt="切换图片1显示">
<img src="trigger-btn-2.png" onclick="AfficherCacher('image2')" alt="切换图片2显示">

<!-- 需要控制显示/隐藏的图片 -->
<img id="image1" src="your-image-1.jpg" style="display: none;" alt="图片1">
<img id="image2" src="your-image-2.jpg" style="display: none;" alt="图片2">

JavaScript 函数 #

function AfficherCacher(targetId) {
  // 获取两个图片的DOM元素
  const image1 = document.getElementById('image1');
  const image2 = document.getElementById('image2');

  // 根据目标ID处理显示逻辑
  if (targetId === 'image1') {
    // 先隐藏图片2
    image2.style.display = 'none';
    // 切换图片1的显示状态（隐藏→显示，显示→隐藏）
    image1.style.display = image1.style.display === 'none' ? 'block' : 'none';
  } else if (targetId === 'image2') {
    // 先隐藏图片1
    image1.style.display = 'none';
    // 切换图片2的显示状态
    image2.style.display = image2.style.display === 'none' ? 'block' : 'none';
  }
}

逻辑说明 #

1. 元素标记：给需要控制的图片加上唯一id，确保JS能精准定位元素。
2. 强制隐藏另一张图：每次操作目标图片前，先把另一张图片设置为display: none（隐藏状态），彻底避免同时显示的问题。
3. 切换当前图片状态：通过判断当前图片的display属性，实现点击触发按钮时的显示/隐藏切换。

可选修改（无需隐藏当前图片的场景） #

如果你希望点击触发按钮时只显示目标图片，不允许隐藏，可以把函数改成这样：

function AfficherCacher(targetId) {
  const image1 = document.getElementById('image1');
  const image2 = document.getElementById('image2');

  if (targetId === 'image1') {
    image1.style.display = 'block';
    image2.style.display = 'none';
  } else if (targetId === 'image2') {
    image2.style.display = 'block';
    image1.style.display = 'none';
  }
}

这样点击触发按钮时，只会显示对应的图片，自动隐藏另一张，完全符合你要的互斥显示需求。

内容的提问来源于stack exchange，提问作者Richter Mégane