JavaScript-Element ausblenden/einblenden

Question

Wie kann ich den "Bearbeiten"-Link ausblenden, nachdem ich ihn gedrückt habe? und kann ich auch den "lorem ipsum"-Text ausblenden, wenn ich "Bearbeiten" drücke?

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

Answer 1

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>

Answer 2

Sie können diesen Code auch zum Ein- und Ausblenden von Elementen verwenden:

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

Hinweis Der Unterschied zwischen style.visibility y style.display ist Bei der Verwendung von visibility:hidden im Gegensatz zu display:none ist das Tag nicht sichtbar, aber es wird ihm Platz auf der Seite zugewiesen. Das Tag wird gerendert, es ist nur nicht auf der Seite zu sehen.

Siehe dies enlace um die Unterschiede zu sehen.

Answer 3

Ich würde dies vorschlagen, um Elemente auszublenden (wie andere vorgeschlagen haben):

document.getElementById(id).style.display = 'none';

Aber um Elemente sichtbar zu machen, würde ich folgendes vorschlagen (anstelle von display = 'block'):

document.getElementById(id).style.display = '';

Der Grund dafür ist, dass die Verwendung von display = 'block' dazu führt, dass sowohl im IE (11) als auch in Chrome (Version 43.0.2357.130 m) auf der Seite, an der ich arbeite, zusätzlicher Rand/Whitespace neben dem Element sichtbar gemacht wird.

Wenn Sie eine Seite zum ersten Mal in Chrome laden, wird ein Element ohne Stilattribut im DOM-Inspektor wie folgt angezeigt:

element.style {
}

Das Ausblenden mit dem Standard-JavaScript führt erwartungsgemäß zu diesem Ergebnis:

element.style {
  display: none;
}

Wenn man sie mit display = 'block' wieder sichtbar macht, sieht sie so aus:

element.style {
  display: block;
}

Das ist nicht mehr dasselbe wie früher. In den meisten Fällen dürfte dies keinen Unterschied machen. Aber in einigen Fällen führt es zu Anomalien.

Mit display = '' wird der ursprüngliche Zustand im DOM-Inspektor wiederhergestellt, daher scheint dies der bessere Ansatz zu sein.

Answer 4

Ich möchte Ihnen den folgenden Vorschlag machen JQuery Option.

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

Zum Beispiel:

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

Answer 5

Können Sie die versteckte Eigenschaft des Elements verwenden:

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false