JavaScript标签画廊故障：切换相册时仅隐图片，文本未隐藏的修复方法

问题根源 #

当前JS仅针对.img-prezentare类的图片做显示/隐藏控制，但text-poze文本是图片的同级元素，不在控制范围内，导致切换相册时文本残留。

修复方案 #

核心思路是把包含图片和文本的整个相册项作为控制单元，统一控制显示状态。具体步骤如下：

1. 给每个相册容器添加data-album属性

修改HTML中每个包含图片和文本的.col-md-4.center.album1容器，让它和内部图片的data-album保持一致，确保控制范围覆盖文本：

<div class="row justify-content-evenly">
  <!-- 给父容器添加与图片一致的data-album属性 -->
  <div class="col-md-4 center album1" data-album="album 1">
    <a href="adrbirouri.html"> <img class="img-prezentare" src="../ADR Birouri/View05.jpg" data-album="album 1"></a>
    <div class="text-poze"> ADR Birouri </div>
  </div>

  <div class="col-md-4 center album1" data-album="album 1">
    <a href="baiamare.html"><img class="img-prezentare" src="../Bloc Baia Mare/View05.jpg" data-album="album 1"></a>
    <div class="text-poze"> Bloc Baia Mare</div>
  </div>

  <div class="col-md-4 center album1" data-album="album 1">
    <a href="nisipari.html"><img class="img-prezentare" src="../Bloc Nisipari/View01.jpg" data-album="album 1"></a>
    <div class="text-poze">Bloc Nisipari</div>
  </div>
  <!-- 后续album2、album3的容器需对应添加data-album="album 2"、data-album="album 3" -->
</div>

2. 修改JS代码，控制整个相册项

将原来针对图片的选择器和逻辑，替换为针对整个相册容器的控制：

function album() {
  // 仅选择相册切换区域的a标签，避免干扰页面其他a元素
  let links = document.querySelectorAll('.selector a');
  // 选择所有包含图片和文本的相册容器
  let albumItems = document.querySelectorAll('.album1');

  // 修改显示逻辑，控制整个相册项的显示/隐藏
  function displayAlbumItems(items, album) {
    items.forEach((item) => {
      item.hidden = item.dataset.album !== album;
    });
  }

  links.forEach((link) => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      // 去除文本前后空格，避免因空格导致匹配失败
      const albumName = link.textContent.trim();

      switch (albumName) {
        case "album 1":
          displayAlbumItems(albumItems, 'album 1');
          break;
        case "album 2":
          displayAlbumItems(albumItems, 'album 2');
          break;
        case "album 3":
          displayAlbumItems(albumItems, 'album 3');
          break;
        case "all":
          // 显示所有相册项
          albumItems.forEach((item) => {
            item.hidden = false;
          });
          break;
      }
    });
  });
}
window.onload = album;

3. 额外优化说明

• 缩小a标签选择范围，避免绑定页面无关元素
• 用trim()处理文本，防止空格引发的匹配错误
• 简化显示逻辑的判断写法，让代码更简洁

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