如何实现点击图片切换显示对应文本Div，仅保留单个文本框可见

我有一个包含20张图片的画廊，每张图片对应一个带文本的div。需求是：点击图片时显示对应文本div；点击下一张图片时，显示该图片对应的文本div，同时关闭之前打开的文本div，同一时间仅能显示一个文本框。

现有代码如下：

attachToggleListener("leifr","rosenvold");
attachToggleListener("damians","smith");
attachToggleListener("megan","adam");

function attachToggleListener (buttonID, divID) {
  var myTrigger = document.getElementById(buttonID);
  if (myTrigger != null) {
    myTrigger.addEventListener("click", toggleDiv);
    myTrigger.targetDiv = divID;
  }
}

function toggleDiv(evt) {
  var target = document.getElementById(evt.currentTarget.targetDiv);
  if (target.style.display === "block")
      { target.style.display = "none"; }
  else
      { target.style.display = "block"; }
}

当前代码能实现点击图片显示对应文本div，但切换图片时之前的div不会关闭，导致多个文本框同时显示，无法满足单框可见的需求。

解决方案 #

核心逻辑是：每次点击图片时，先隐藏所有文本div，再根据当前点击的图片决定是否显示对应的div（如果点击的是当前已显示的图片，则保持隐藏）。

方案一：通过统一类名批量操作（推荐，适合20个元素的场景）

首先给所有文本div添加一个统一的类名，比如text-box（修改HTML部分，给每个文本div加上class="text-box"），然后修改toggleDiv函数：

attachToggleListener("leifr","rosenvold");
attachToggleListener("damians","smith");
attachToggleListener("megan","adam");
// 后续新增图片时，继续调用attachToggleListener即可

function attachToggleListener (buttonID, divID) {
  var myTrigger = document.getElementById(buttonID);
  if (myTrigger != null) {
    myTrigger.addEventListener("click", toggleDiv);
    myTrigger.targetDiv = divID;
  }
}

function toggleDiv(evt) {
  const target = document.getElementById(evt.currentTarget.targetDiv);
  // 批量获取所有文本div
  const allTextBoxes = document.querySelectorAll('.text-box');
  
  // 先隐藏所有文本div
  allTextBoxes.forEach(box => {
    box.style.display = 'none';
  });
  
  // 如果当前目标之前是隐藏状态，就显示它；否则保持隐藏（实现点击同一图片关闭）
  if (target.style.display !== 'block') {
    target.style.display = 'block';
  }
}

方案二：维护文本div ID数组（无需修改HTML）

如果不想修改HTML结构，可以手动维护一个包含所有文本div ID的数组，然后遍历隐藏：

// 把所有文本div的ID都添加到这个数组里，后续新增时补充
const allTextDivIds = ["rosenvold", "smith", "adam"];

attachToggleListener("leifr","rosenvold");
attachToggleListener("damians","smith");
attachToggleListener("megan","adam");

function attachToggleListener (buttonID, divID) {
  var myTrigger = document.getElementById(buttonID);
  if (myTrigger != null) {
    myTrigger.addEventListener("click", toggleDiv);
    myTrigger.targetDiv = divID;
  }
}

function toggleDiv(evt) {
  const target = document.getElementById(evt.currentTarget.targetDiv);
  
  // 隐藏所有文本div
  allTextDivIds.forEach(id => {
    document.getElementById(id).style.display = 'none';
  });
  
  // 切换当前目标的显示状态
  if (target.style.display !== 'block') {
    target.style.display = 'block';
  }
}

效果说明 #

• 点击任意图片，会先关闭所有已打开的文本div，再显示当前图片对应的div
• 点击当前已显示文本div对应的图片，会关闭该文本div

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