JavaScript隐藏/显示元素

我怎么能隐藏“编辑”链接后，我按下它?我也可以隐藏“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>

当前回答

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>

2011-06-05 12:51:41

其他回答

document.getElementById("an_id").hidden = true;

2022-08-04 20:43:12

2011-06-05 12:51:41

只需为所有元素自己创建隐藏和显示方法，如下所示

Element.prototype.hide = function() {
    this.style.display = 'none';
}
Element.prototype.show = function() {
    this.style.display = '';
}

在此之后，您可以使用通常的元素标识符的方法，如以下示例:

document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();

or:

<img src="removeME.png" onclick="this.hide()">

2016-12-25 12:31:15

如果你在一个表中使用它:-

  <script type="text/javascript">
   function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'table-row';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}
</script>


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

2017-10-05 18:09:47

你应该尽可能地将JS视为行为，而将CSS视为视觉糖果。通过稍微改变你的HTML:

<td class="post">
    <a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
    <span id="answer1" class="post-answer">
       <textarea rows="10" cols="115"></textarea>
    </span>
    <span class="post-text" id="text1">Lorem ipsum ... </span>
</td>

你可以简单地使用CSS规则从一个视图切换到另一个视图:

td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
    display : none;
}

以及在两个类之间切换的JS代码

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

2011-06-05 13:07:54

JavaScript隐藏/显示元素

推荐文章

最新文章

标签