我想制作一个 'Spoiler Alert' 按钮 (2)

Question

首先，感谢你们，我得到了我想要的。但是，我又想到了一个问题。

let btn = document.getElementById("change");
let spoilSpan = document.getElementById("spoiled");
btn.addEventListener("click", spoilerAlert);

function spoilerAlert() {
  spoilSpan.classList.toggle("show");
}

.spoiler {
  display: inline-block;
  background: #000;
  padding: 1px;
}

.show {
  display: inline-block;
  background: none;
}

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

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

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

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

我想让它一键工作。不过，最后一个“剧透”不行。

我该怎么办？

抱歉什么都不知道

Answer 1

具有相同 id 的多个元素会使您的 HTML 无效。在这种情况下，getElementById 将 return 仅匹配第一个不是您需要的元素。

改为这样写：

function spoilerAlert() {
  Array.from(document.getElementsByClassName('spoiler')).forEach(x => {
    x.classList.toggle("show");
  });
}

您的代码段修复如下：

let btn = document.getElementById("change");
let spoilSpan = document.getElementById("spoiled");
btn.addEventListener("click", spoilerAlert);

function spoilerAlert() {
  Array.from(document.getElementsByClassName('spoiler')).forEach(x => {
    x.classList.toggle("show");
  });
}

.spoiler {
  display: inline-block;
  background: #000;
  padding: 1px;
}

.show {
  display: inline-block;
  background: none;
}

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

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

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

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

我想制作一个 'Spoiler Alert' 按钮 (2)

I want to make a 'Spoiler Alert' button (2)

html

javascript

css

button