Javascript 多个按钮仅显示按钮'；内容

我正在尝试使用HTML按钮，但问题是我似乎无法让它们正确地协同工作。我会输入两次代码，但它只对一个按钮的内容有效。无论我按下哪个按钮（是的，它确实显示多个按钮），它只显示其中一个按钮的内容。我的问题是：我必须改变什么才能使按钮彼此独立工作

<div id="spoiler" style="display:none">

This is the code I use.

</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Test</button>

这是我使用的代码。
试验

首先，使用jQuery——它比原始js打字更快，而且可以立即跨浏览器输入

其次，不要使用内联javascript。阅读和排除故障要困难得多。（下面的脚本可以直接插入html代码中）

接下来，通过IDs将按钮链接到它应该操作的元素，如下所示：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){

        $('#btnSpoiler').click(function(){
            $('#spoiler').toggle();
        });

    });
</script>
<div id="spoiler" style="display:none">
    This is the code I use.
</div>

<button id="btnSpoiler" title="Click to show/hide content">Show</button>

$（文档）.ready（函数（）{
$（'#btnSpoiler'）。单击（函数（）{
$（“#扰流板”）.toggle（）；
});
});
这是我使用的代码。
显示

实际上，

link

可能是个错误的词——ID本身没有什么特别之处——我指的是这样一个事实，通过阅读代码，您可以很容易地看到哪个按钮与哪个元素匹配

但是，请注意DIV是如何通过其ID进行控制的

---

避免内联javascript的原因：

id属性为HTML元素指定一个唯一的id（该值在HTML文档中必须是唯一的）

如果你有2个，你需要不同的ID

这是我使用的代码。
试验
这是我使用的代码。2.
测试