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页面时，我只能将其中一个代码实际工作？有关为什么会这种情况发生的任何帮助？

干杯，詹姆斯

Answer 1

添加第二个代码块有效，但您需要确保您使用的ID对于两个块都不同。假设块1具有id show_id和spoiler_id，块2也具有id show_id和spoiler_id，那么document.getElementById(show_id)将始终选择第一次出现show_id。

＆＃13;

<!--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>

＆＃13;

您应该编辑块2的ID以确保它引用自身而不是其他块。只需将show_id和spoiler_id更改为其他内容，然后相应地更改getElementById()。 Here's the JSFiddle for that.

HTML [显示]代码仅在添加2时显示其中一个？

1 个答案: