HTML [Show] 代码 添加 2 个时只显示其中 1 个？

Question

当我添加下面的代码时。

<a id="show_id" 
   onclick="document.getElementById('spoiler_id').style.display='';
            document.getElementById('show_id').style.display='none';"
   class="link">
   [Show]
</a>
<span id="spoiler_id" style="display: none">
  <a onclick="document.getElementById('spoiler_id').style.display='none';
              document.getElementById('show_id').style.display='';"
     class="link">
  [Hide]
  </a>
<br>
INSERT CONTENT HERE
</span>

当我将其中的 2 个代码放入 HTML 页面时，我只能让其中的 1 个代码真正起作用吗？对为什么这种情况不断发生有什么帮助吗？

干杯， 詹姆斯

Answer 1

添加第二个代码块是可行的，但您需要确保您使用的 id 对两个 block 都是不同的。假设区 block 1 的 ID 为 show_id 和 spoiler_id，区 block 2 的 ID 也为 show_id 和 spoiler_id，然后 document.getElementById(show_id) 将始终选择第一次出现的 show_id。

<!--Code blocks. Note they both have the same IDs and getElementById-->
<!--Block 1-->
<a id="show_id" 
   onclick="document.getElementById('spoiler_id').style.display='';
            document.getElementById('show_id').style.display='none';"
   class="link">
   [ShowBlock1]
</a>
<span id="spoiler_id" style="display: none">
  <a onclick="document.getElementById('spoiler_id').style.display='none';
              document.getElementById('show_id').style.display='';"
     class="link">
  [Hide]
  </a>
<br>
INSERT CONTENT HERE
</span>

<!--Block 2-->
<a id="show_id" 
   onclick="document.getElementById('spoiler_id').style.display='';
            document.getElementById('show_id').style.display='none';"
   class="link">
   [ShowBlock2]
</a>
<span id="spoiler_id" style="display: none">
  <a onclick="document.getElementById('spoiler_id').style.display='none';
              document.getElementById('show_id').style.display='';"
     class="link">
  [Hide]
  </a>
<br>
INSERT CONTENT HERE
</span>

你应该编辑 block 2 的 ID 以确保它指的是它自己而不是其他 block 。只需将 show_id 和 spoiler_id 更改为其他内容，并相应地更改 getElementById()。 Here's the JSFiddle for that.