单个Spoiler Alert按钮控制多个剧透元素时部分功能失效如何解决

• HTML 中id属性要求全局唯一，你给两个剧透span都设置了相同的id="spoiled"，document.getElementById()方法只会返回第一个匹配到的元素，因此只有第一个剧透能响应切换逻辑。
• 原有JS逻辑只获取了单个元素，没有遍历所有剧透内容统一处理。

CSS部分不需要调整，只需要修改HTML和JS代码即可实现单个按钮控制所有剧透的效果：

调整后的HTML代码 #

<button id="change">Spoiler Alert</button>
<br><br>

<span>Not Spoiler</span>
<br><br>

<span class='spoiler'>
  Spoiler
</span><br><br>
  
<span>Not Spoiler</span>
<br><br>

<span class='spoiler'>
  Spoiler
</span>

说明：删除了所有剧透元素重复的id="spoiled"属性，仅保留公共的spoiler类用于匹配元素。

调整后的JS代码 #

let btn = document.getElementById("change");
// 获取所有带spoiler类的剧透元素
let spoilSpans = document.querySelectorAll(".spoiler");
btn.addEventListener("click", spoilerAlert);

function spoilerAlert() {
  // 遍历所有剧透元素，统一切换show类
  spoilSpans.forEach(span => {
    span.classList.toggle("show");
  })
}

说明：用querySelectorAll匹配所有剧透元素，点击按钮时遍历所有元素执行类切换操作，就能实现所有剧透同步显示/隐藏的效果。

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