Kaip galėčiau paslėpti 'Edit'- nuorodą po to, kai ją paspaudžiu? ir taip pat ar galėčiau paslėpti "lorem ipsum" tekstą, kai paspaudžiu redaguoti?
<script type="text/javascript">
funkcija 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 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>
Turėtumėte galvoti, kad JS yra skirtas elgsenai, o CSS - vizualiniams saldainiams. Šiek tiek pakeisdami savo 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>
galėsite pereiti iš vieno vaizdo į kitą tiesiog naudodami CSS taisykles:
td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
display : none;
}
Ir JS kodas, kuris perjungia dvi klases
<script type="text/javascript">
function showStuff(aPostTd) {
aPostTd.className="post-editing";
}
</script>