我怎么能隐藏“编辑”链接后，我按下它?我也可以隐藏“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>
当前回答
如果你在一个表中使用它:-
<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>
其他回答
类和id的香草JS
通过ID
document.querySelector('#element-id').style.display = 'none';
按类别(单个元素)
document.querySelector('.element-class-name').style.display = 'none';
按类别(多个元素)
for (const elem of document.querySelectorAll('.element-class-name')) {
elem.style.display = 'none';
}
你应该尽可能地将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>
document.getElementById("an_id").hidden = true;
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>
我推荐Javascript，因为它相对较快，可塑性更强。
<script>
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';
}
</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>
