如何实现歌词与专辑描述互斥显示？修复当前代码异常问题

嘿，我来帮你搞定这个问题，顺便解释那个让你摸不着头脑的奇怪现象！

先说说为什么会出现同时显示的异常 #

你的代码里，问题出在最后那段多余的for循环上。我们一步步看第二次点击的流程：

1. 初始状态：专辑描述隐藏，歌词显示
2. 点击后，代码先把歌词的显示状态从block切换为none，然后把专辑描述设为block
3. 紧接着进入循环，你本意是想隐藏其他歌词，但这段循环最后强制把songlyrics设为block（还写错了大小写：blocK）
4. 结果就是：专辑描述是block，歌词也被强制设为block，两者同时显示
5. 之后每次点击，循环都会强制显示歌词，所以点击事件彻底失效

简化后的解决方案 #

我们的核心需求是互斥显示：要么显示专辑，要么显示歌词。直接简化逻辑，删掉多余的循环就行：

修改后的JavaScript代码 #

function showlyrics() {
  const albumInfo = document.getElementById("albuminfo");
  const songLyrics = document.getElementById("songlyrics");
  
  // 判断当前专辑是否可见，切换两者的显示状态
  const isAlbumVisible = albumInfo.style.display !== "none";
  if (isAlbumVisible) {
    // 隐藏专辑，显示歌词
    albumInfo.style.display = "none";
    songLyrics.style.display = "block";
  } else {
    // 隐藏歌词，显示专辑
    songLyrics.style.display = "none";
    albumInfo.style.display = "block";
  }
}

更优雅的优化方案（用CSS类控制） #

如果想让代码更整洁，可以用CSS类来管理显示隐藏：

/* 新增一个隐藏类 */
.hidden {
  display: none !important;
}

/* 保留你原有的其他CSS */
#starslyrics{ position:absolute; top:3%; right:40%; font-size:25px; font-weight:bold; }
.hover:hover,.hover a:hover{ border-radius:5px; border:none; cursor:pointer; background-color:red; color:white; }
.lyrics{ position:relative; margin-top:50px; font-size:18px; }
#albuminfo{ text-align:justify; width:400px; font-size:18px; margin-top:50px; }

<!-- 给歌词元素初始加上hidden类 -->
<div id="lyrics">
  <p id="albuminfo"> THIS IS THE <strong>ALBUM DESCRIPTION</strong><br><br> IF THIS IS VISIBLE, THE SONG LYRICS SHOULDN'T BE </p>
  <p class="lyrics hidden" id="songlyrics"> THIS IS THE <strong>SONG LYRICS</strong><br><br> IF THIS IS VISIBLE, THE ALBUM DESCRIPTION SHOULDN'T BE </p>
  <span class="hover" onclick="showlyrics()" id="starslyrics">Click here</span>
</div>

// 切换类即可，逻辑更简洁
function showlyrics() {
  const albumInfo = document.getElementById("albuminfo");
  const songLyrics = document.getElementById("songlyrics");
  
  albumInfo.classList.toggle("hidden");
  songLyrics.classList.toggle("hidden");
}

为什么加了whatever;后代码反而正常？ #

这个现象是浏览器异步渲染的巧合：

• 当你执行albuminfo.style.display="block"后，浏览器不会立即更新DOM样式，而是把这个操作放进渲染队列
• 没有额外代码时，循环会立即执行，强制把歌词设为显示，覆盖了之前的切换
• 加了whatever;（哪怕是空代码）后，给了浏览器一点时间处理渲染队列，先完成专辑显示、歌词隐藏的操作，再执行循环——但这只是巧合，不同浏览器可能表现不同，完全不是正确的解决方式

本质还是原代码的循环逻辑错误，才会出现这种依赖浏览器时机的奇怪现象。

内容的提问来源于stack exchange，提问作者K. P.