kzen.dev
Więcej
Question

JavaScript hide/show element

Jak mogę ukryć link 'Edytuj' po jego naciśnięciu? a także czy mogę ukryć tekst "lorem ipsum" po naciśnięciu edytuj?

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

<td class="post">

  <a href="#" onclick="showStuff('answer1'); return false;">Edycja</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
Sofyan Thayf
Edytowane pytanie 8. października 2019 в 12:44
Programowanie
javascript
Popular videos
« Poprzedni
Następny »
To pytanie ma 1 odpowiedź w języku angielskim, aby je przeczytać zaloguj się na swoje konto.
Solution / Answer
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>
Jonathan
Jonathan
Edytowana odpowiedź 17. października 2017 в 3:45
425

Chciałbym zasugerować Ci opcję JQuery.

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

Na przykład:

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

Powinieneś myśleć JS dla zachowania, a CSS dla wizualnej słodyczy tak bardzo jak to możliwe. Zmieniając nieco swój 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>

Będziesz w stanie przełączyć się z jednego widoku na drugi po prostu używając reguł CSS :

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

Oraz kodu JS, który przełącza pomiędzy dwoma klasami

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>
sitifensys
sitifensys
Edytowana odpowiedź 5. czerwca 2011 в 1:31
13