为 getElementById 多次声明 Id - 如何自动化？

Question

我有这么小的javascript代码（我在Markdown中使用它）：

<button title="Click to show answer" type="button" class="btn btn-primary"
   onclick="if(document.getElementById('spoiler') .style.display=='none')
              {document.getElementById('spoiler') .style.display=''}
            else{document.getElementById('spoiler') .style.display='none'}">
  show/hide
</button><div id="spoiler" style="display:none">
***

Hidden Text

***
</div>

问题是，如果我想在一个页面上制作多个按钮来隐藏文本，那么我需要将 spoiler 重命名为 spoilerN 4 次

问题：

(最小值)这段代码中是否可以将Id简洁地输出到一个单独的变量中？
(最大)是否可以自动生成一个变量？以便代码本身在每次声明新按钮时重用该变量？

Answer 1

你最好取消内联样式和 javascript，并在 css 中使用一些 javascript 来控制 adding.removing css classes.

假设按钮始终是扰流板 div 的同级按钮，您可以通过在扰流板 div 上仅添加一个 class 并将其自动附加到扰流板 div 上的每个实例来实现一页：

document.querySelectorAll(".spoiler").forEach(s => {
  s.previousSibling.addEventListener("click", () => {
    s.classList.toggle("show");
  });
})

.spoiler{
  display:none
}
.show{
  display:block
}

<button title="Click to show answer" type="button" class="btn btn-primary">   
  show/hide
</button><div class="spoiler">
***

Hidden Text

***
</div>

Answer 2

Jamie的回答竟然和事实很相似！谢谢！

但是在 Markdown 中，我和我的同事进行了一些小的修改，因为解决方案并没有立即奏效。工作版本如下所示：

第一个块（一个，在文档的开头（或在 style.css 中用于 bookdown 中的所有 Rmd 文件））：

.spoiler{
  display:none
}
.show{
  display:block
}

第二篇（其实是隐藏文字）

<button title="Click to show answer" type="button" class="btn btn-primary">   
  show/hide
</button><div class="spoiler">
***

Hidden Text

***
</div>

<button title="Click to show answer" type="button" class="btn btn-primary">   
  show/hide
</button><div class="spoiler">
***

Hidden Text2

***
</div>

第三块（一块，在Rmd文件的最后）将 previousibling 更改为 previousElementSibling

document.querySelectorAll(".spoiler").forEach(s => {
  s.previousElementSibling.addEventListener("click", () => {
    s.classList.toggle("show");
  });
})

感谢您的帮助！

为 getElementById 多次声明 Id - 如何自动化？

Multiple declaration of Id for getElementById - how to automate?

javascript

html

r-markdown