DIV无法切换显示/隐藏问题排查：求原因及解决方案

为何我的DIV无法实现显示/隐藏切换？我尝试结合HTML进行调试，感觉代码逻辑看似正常，但肯定存在疏漏，却找不到问题所在。以下是我的代码：

albums.forEach((album) => {
    html += `<div class="user"><h2>User ${album.id} Album</h2>`;
        
    let albumPhotos = photos.filter(p => p.albumId == album.id);
    html += `<div>`
    albumPhotos.forEach(photo => {
      html += `<div id="myDIV">
        <img src="${photo.thumbnailUrl}">
       </div>
 `;
    });
    html += '</div>';
  });
// 调用HTML中设置的容器
  let container = document.querySelector(".container");
  container.innerHTML = html;
  let container2 = document.querySelector(".button");
  container.innerHTML = html;
}
// 调用渲染函数
renderUsers();
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

• ID重复导致仅第一个元素生效：你在循环生成图片容器时，给每个<div>都用了id="myDIV"，但HTML规范里ID必须是唯一的。document.getElementById("myDIV")只会返回页面中第一个带有该ID的元素，所以切换函数只能控制第一个图片容器，其他容器完全不受影响。
• 重复设置innerHTML：代码里container.innerHTML = html写了两次，第二次是多余的，直接删除即可。
• 行内样式判断的局限性：x.style.display只能读取元素的行内样式，如果元素的display属性是通过CSS类或外部样式表设置的，这个判断会不准确。建议用window.getComputedStyle(x).display获取实际生效的样式，或者更推荐用CSS类来控制显示隐藏。

修改后的代码示例 #

方案1：批量切换所有图片容器 #

先把生成容器的代码里的ID改为类：

albums.forEach((album) => {
    html += `<div class="user"><h2>User ${album.id} Album</h2>`;
        
    let albumPhotos = photos.filter(p => p.albumId == album.id);
    html += `<div>`
    albumPhotos.forEach(photo => {
      // 改用类名替代重复ID
      html += `<div class="photo-container">
        <img src="${photo.thumbnailUrl}">
       </div>
 `;
    });
    html += '</div>';
});

let container = document.querySelector(".container");
container.innerHTML = html;
// 删除重复的container.innerHTML = html

然后修改切换函数，实现批量控制：

function myFunction() {
  // 获取所有图片容器
  const allContainers = document.querySelectorAll(".photo-container");
  allContainers.forEach(container => {
    // 获取实际生效的显示样式
    const currentDisplay = window.getComputedStyle(container).display;
    container.style.display = currentDisplay === "none" ? "block" : "none";
  });
}

方案2：单个容器独立切换（带按钮） #

如果需要每个图片容器单独控制，可以给每个容器添加切换按钮，并用事件委托处理：

// 生成HTML时添加切换按钮
albums.forEach((album) => {
    html += `<div class="user"><h2>User ${album.id} Album</h2>`;
        
    let albumPhotos = photos.filter(p => p.albumId == album.id);
    html += `<div>`
    albumPhotos.forEach(photo => {
      html += `<div class="photo-container">
        <img src="${photo.thumbnailUrl}">
        <button class="toggle-btn">切换显示</button>
       </div>
 `;
    });
    html += '</div>';
});

let container = document.querySelector(".container");
container.innerHTML = html;

// 用事件委托处理按钮点击
container.addEventListener("click", (e) => {
  if (e.target.classList.contains("toggle-btn")) {
    // 找到当前按钮对应的图片容器
    const photoContainer = e.target.closest(".photo-container");
    const currentDisplay = window.getComputedStyle(photoContainer).display;
    photoContainer.style.display = currentDisplay === "none" ? "block" : "none";
  }
});

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