"JavaScript" paslėpti / parodyti elementą

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>
```
Sofyan Thayf
Redaguotas klausimas popietr spalis 2019 в 12:44
Programavimas
javascript
popietr birželis 2011 в 12:45
28 peržiūros
Sprendimas
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">
Jonathan
Redaguotas atsakymas popietr spalis 2017 в 3:45
Komentarai (8)

Norėčiau jums pasiūlyti JQuery variantą.

$("#item").toggle();
$("#item").hide();
$("#item").show();

Pavyzdžiui:

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });
Komentarai (3)

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">
sitifensys
Redaguotas atsakymas popietr birželis 2011 в 1:31
Komentarai (0)