JavaScript 隐藏/显示元素

Question

按下后如何隐藏“编辑”链接？当我按下编辑时，我还可以隐藏“lorem ipsum”文本吗？

<script type="text/javascript">
function showStuff(id) {
  document.getElementById(id).style.display = 'block';
}
</script>

<td class="post">

  <a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
  <span id="answer1" style="display: none;">
    <textarea rows="10" cols="115"></textarea>
  </span>

  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</td>

原文由 nortaga 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

 function showStuff(id, text, btn) {
 document.getElementById(id).style.display = 'block';
 // hide the lorem ipsum text
 document.getElementById(text).style.display = 'none';
 // hide the link
 btn.style.display = 'none';
 }

 <td class="post">

 <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
 <span id="answer1" style="display: none;">
 <textarea rows="10" cols="115"></textarea>
 </span>

 <span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
 </td>

原文由 Sascha Galley 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您还可以使用此代码来显示/隐藏元素：

 document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

注意 style.visibility 和 style.display 之间的区别在于使用 visibility:hidden 与 display:none 不同，标签不可见，但在页面上为其分配了空间。标签已呈现，只是在页面上看不到。

请参阅此 链接 以查看差异。

原文由 A-Sharabiani 发布，翻译遵循 CC BY-SA 3.0 许可协议