Wie kann ich den 'Bearbeiten'-Link ausblenden, nachdem ich ihn gedrückt habe? und kann ich auch den Text "lorem ipsum" ausblenden, wenn ich auf 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>

Sie können diesen Code auch verwenden, um Elemente anzuzeigen / auszublenden:

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

Hinweis Der Unterschied zwischen style.visibilityund style.displaybesteht bei Verwendung der Sichtbarkeit: Im Gegensatz zur Anzeige ausgeblendet: Keine. Das Tag ist nicht sichtbar, es wird jedoch Platz auf der Seite zugewiesen. Das Tag wird gerendert und auf der Seite nicht angezeigt.

Siehe diesen Link , um die Unterschiede zu sehen.

Ich möchte Ihnen die Option JQuery vorschlagen .

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

Beispielsweise:

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

Ich würde dies vorschlagen, um Elemente zu verbergen (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' einen zusätzlichen Rand / Leerzeichen neben dem Element verursacht, das sowohl in IE (11) als auch in Chrome (Version 43.0.2357.130 m) auf der Seite, an der ich arbeite, sichtbar gemacht wird.

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

element.style {
}

Wenn Sie es mit dem Standard-JavaScript ausblenden, geschieht dies wie erwartet:

element.style {
  display: none;
}

Wenn Sie es mit display = 'block' wieder sichtbar machen, wird Folgendes geändert:

element.style {
  display: block;
}

Welches ist nicht das gleiche wie es ursprünglich war. Dies könnte in den meisten Fällen durchaus keinen Unterschied machen. In einigen Fällen führt dies jedoch zu Anomalien.

Wenn Sie display = '' verwenden, wird der ursprüngliche Zustand im DOM-Inspektor wiederhergestellt, sodass dies der bessere Ansatz zu sein scheint.

Sie können die versteckte Eigenschaft des Elements verwenden:

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

Sie sollten JS für Verhalten und CSS für visuelle Süßigkeiten so viel wie möglich denken. Indem Sie Ihren HTML-Code ein wenig ändern:

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

Sie können einfach mithilfe von CSS-Regeln von einer Ansicht zur anderen wechseln:

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

Und JS-Code, der zwischen den beiden Klassen wechselt

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

Obwohl diese Frage schon oft beantwortet wurde, dachte ich, ich würde sie mit einer vollständigeren und solideren Antwort für zukünftige Benutzer ergänzen. Die Hauptantwort löst das Problem, aber ich glaube, es ist besser, einige der verschiedenen Möglichkeiten zu kennen / verstehen, Dinge zu zeigen / zu verbergen.

.

Ändern der Anzeige mit css ()

So habe ich es gemacht, bis ich einige dieser anderen Wege gefunden habe.

Javascript:

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

Vorteile:

• Versteckt und versteckt sich. Das ist alles.

Nachteile:

• Wenn Sie das Attribut "display" für etwas anderes verwenden, müssen Sie den Wert dessen, was er war, vor dem Ausblenden fest codieren. Wenn Sie also "Inline" hätten, müssten Sie dies tun, $("#element_to_hid").css("display", "inline");sonst wird standardmäßig "Blockieren" oder was auch immer, in das es gezwungen wird, zurückgesetzt.
• Geeignet für Tippfehler.

Beispiel: https://jsfiddle.net/4chd6e5r/1/

.

Ändern der Anzeige mit addClass () / removeClass ()

Beim Einrichten des Beispiels für dieses Beispiel bin ich tatsächlich auf einige Fehler bei dieser Methode gestoßen, die sie sehr, sehr unzuverlässig machen.

CSS / Javascript:

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

Vorteile:

• Es versteckt sich ... manchmal. Siehe p1 im Beispiel.
• Nach dem Ausblenden wird wieder der vorherige Anzeigewert verwendet ... manchmal. Siehe p1 im Beispiel.
• Wenn Sie alle versteckten Objekte greifen möchten, müssen Sie dies nur tun $(".hidden").

Nachteile:

• Wird nicht ausgeblendet, wenn der Anzeigewert direkt im HTML-Code festgelegt wurde. Siehe p2 im Beispiel.
• Wird nicht ausgeblendet, wenn die Anzeige mit css () in Javascript eingestellt ist. Siehe Seite 3 im Beispiel.
• Etwas mehr Code, da Sie ein CSS-Attribut definieren müssen.

Beispiel: https://jsfiddle.net/476oha8t/8/

.

Ändern der Anzeige mit toggle ()

Javascript:

$("element_to_hide").toggle();  // To hide and to unhide

Vorteile:

• Funktioniert immer.
• So müssen Sie sich vor dem Umschalten keine Gedanken darüber machen, in welchem ​​Zustand es sich befand. Die offensichtliche Verwendung hierfür ist die Umschalttaste ....
• Kurz und einfach.

Nachteile:

• Wenn Sie wissen müssen, in welchen Status es wechselt, um etwas zu tun, das nicht direkt damit zusammenhängt, müssen Sie mehr Code (eine if-Anweisung) hinzufügen, um herauszufinden, in welchem ​​Status es sich befindet.
• Ähnlich wie bei der vorherigen Con müssen Sie eine Prüfung (eine if-Anweisung) hinzufügen, wenn Sie eine Reihe von Anweisungen ausführen möchten, die toggle () zum Ausblenden enthalten, aber nicht wissen, ob es bereits ausgeblendet ist. Um herauszufinden, ob es bereits versteckt ist, überspringen Sie es. Siehe Seite 1 des Beispiels.
• Im Zusammenhang mit den vorherigen 2 Nachteilen kann die Verwendung von toggle () für etwas, das speziell ausgeblendet oder speziell angezeigt wird, für andere, die Ihren Code lesen, verwirrend sein, da sie nicht wissen, auf welche Weise sie umschalten werden.

Beispiel: https://jsfiddle.net/cxcawkyk/1/

.

Ändern der Anzeige mit hide () / show ()

Javascript:

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

Vorteile:

• Funktioniert immer.
• Nach dem Ausblenden wird wieder der vorherige Anzeigewert verwendet.
• Sie werden immer wissen, in welchen Status Sie wechseln, damit Sie:
  1. Sie müssen keine if-Anweisungen hinzufügen, um die Sichtbarkeit zu überprüfen, bevor Sie den Status ändern, wenn der Status von Bedeutung ist.
  2. wird andere, die Ihren Code lesen, nicht verwirren, in welchen Status Sie wechseln, wenn der Status von Bedeutung ist.
• Intuitiv.

Nachteile:

• Wenn Sie einen Umschalter imitieren möchten, müssen Sie zuerst den Status überprüfen und dann in den anderen Status wechseln. Verwenden Sie stattdessen toggle () für diese. Siehe Seite 2 des Beispiels.

Beispiel: https://jsfiddle.net/k0ukhmfL/

.

Insgesamt würde ich sagen, dass es am besten ist, hide () / show () zu sein, es sei denn, Sie benötigen es ausdrücklich, um umzuschalten. Ich hoffe, Sie fanden diese Informationen hilfreich.

Erstellen Sie einfach selbst Methoden zum Ausblenden und Anzeigen für alle Elemente wie folgt

Element.prototype.hide = function() {
    this.style.display = 'none';
}
Element.prototype.show = function() {
    this.style.display = '';
}

Danach können Sie die Methoden mit den üblichen Elementkennungen wie in diesen Beispielen verwenden:

document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();

oder:

<img src="removeME.png" onclick="this.hide()">

Ich empfehle Javascript, weil es relativ schnell und formbarer ist.

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

Wenn Sie es in einer Tabelle verwenden, verwenden Sie Folgendes: -

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

Vanilla JS für Klassen und IDs

Nach ID

document.querySelector('#element-id').style.display = 'none';

Nach Klasse (Einzelelement)

document.querySelector('.element-class-name').style.display = 'none';

Nach Klasse (mehrere Elemente)

for (let elem of document.querySelectorAll('.element-class-name')) {
    elem.style.display = 'none';
}