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>

Antwoord 2, autoriteit 17%

Je kunt deze code ook gebruiken om elementen te tonen/verbergen:

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

OpmerkingHet verschil tussen style.visibilityen style.displayis
bij gebruik van zichtbaarheid:verborgen in tegenstelling tot display:none, is de tag niet zichtbaar, maar wordt er ruimte voor toegewezen op de pagina. De tag wordt weergegeven, hij wordt alleen niet weergegeven op de pagina.

Bekijk deze linkom de verschillen te zien.

Antwoord 3, autoriteit 10%

Ik zou dit aanraden om elementen te verbergen (zoals anderen hebben gesuggereerd):

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

Maar om elementen zichtbaar te maken, raad ik dit aan (in plaats van display = ‘block’):

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

De reden is dat het gebruik van display = ‘block’ extra marge/witruimte veroorzaakt naast het element dat zichtbaar wordt gemaakt in zowel IE (11) als Chrome (versie 43.0.2357.130 m) op de pagina waaraan ik werk.

Wanneer u voor het eerst een pagina in Chrome laadt, wordt een element zonder stijlkenmerk als volgt weergegeven in de DOM-inspector:

element.style {
}

Als je het verbergt met het standaard JavaScript, wordt het dit, zoals verwacht:

element.style {
  display: none;
}

Door het weer zichtbaar te maken met display = ‘block’ verandert het in dit:

element.style {
  display: block;
}

Wat niet hetzelfde is als het oorspronkelijk was. Dit zou in de meeste gevallen heel goed geen verschil kunnen maken. Maar in sommige gevallen introduceert het wel afwijkingen.

Het gebruik van display = ” herstelt het in de oorspronkelijke staat in de DOM-inspecteur, dus het lijkt de betere aanpak.

Antwoord 4, autoriteit 8%

Ik zou je de optie JQuerywillen voorstellen.

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

Bijvoorbeeld:

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

Antwoord 5, autoriteit 5%

u kunt de verborgen eigenschap van element gebruiken:

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

Antwoord 6, autoriteit 2%

Je moet zoveel mogelijk denken aan JS voor gedrag en CSS voor visuele snoepjes. Door je HTML een beetje te veranderen:

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

U kunt eenvoudig van de ene weergave naar de andere overschakelen met behulp van CSS-regels:

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

En JS-code die tussen de twee klassen schakelt

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

Antwoord 7, autoriteit 2%

Hoewel deze vraag al vele malen eerder is beantwoord, dacht ik eraan toe te voegen met een meer volledig en solide antwoord voor toekomstige gebruikers. Het belangrijkste antwoord lost het probleem op, maar ik denk dat het misschien beter is om de verschillende manieren om dingen te tonen/verbergen te kennen/begrijpen.

.

Weergave wijzigen met css()

Dit is de manier waarop ik het deed totdat ik een aantal van deze andere manieren vond.

Javascript:

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

Pluspunten:

• Verbergt en maakt zichtbaar. Dat is het zo’n beetje.

Nadelen:

• Als je het attribuut “display” voor iets anders gebruikt, moet je de waarde hardcoderen van wat het was voordat het werd verborgen. Dus als je “inline” had, zou je $("#element_to_hid").css("display", "inline");moeten doen, anders wordt het standaard teruggezet naar “block” of wat dan ook anders wordt het gedwongen.
• Let op typefouten.

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

.

Weergave wijzigen met addClass()/removeClass()

Tijdens het opzetten van het voorbeeld voor deze, kwam ik een aantal fouten tegen in deze methode die het heel erg onbetrouwbaar maken.

Css/Javascript:

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

Pluspunten:

• Het verbergt… soms. Raadpleeg p1 in het voorbeeld.
• Na het zichtbaar maken, keert het terug naar het gebruik van de vorige weergavewaarde….soms. Raadpleeg p1 in het voorbeeld.
• Als je alle verborgen objecten wilt pakken, hoef je alleen maar $(".hidden")te doen.

Nadelen:

• Verbergt niet als de weergavewaarde rechtstreeks in de html is ingesteld. Raadpleeg p2 in het voorbeeld.
• Verbergt niet als de weergave is ingesteld in javascript met css(). Raadpleeg p3 in het voorbeeld.
• Iets meer code omdat je een css-attribuut moet definiëren.

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

.

Weergave wijzigen met toggle()

Javascript:

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

Pluspunten:

• Werkt altijd.
• Hiermee hoeft u zich geen zorgen te maken over de staat waarin deze zich bevond voordat u overstapte. Het voor de hand liggende gebruik hiervan is voor een….schakelknop.
• Kort en eenvoudig.

Nadelen:

• Als je wilt weten naar welke status het overschakelt om iets te doen dat niet direct gerelateerd is, moet je meer code toevoegen (een if-statement) om erachter te komen in welke staat het zich bevindt.
• Net als bij de vorige oplichterij, als je een reeks instructies wilt uitvoeren die de toggle() bevat om te verbergen, maar je weet niet of deze al verborgen is, moet je een vinkje toevoegen (een if-statement) om er eerst achter te komen en als het al verborgen is, sla het dan over. Raadpleeg p1 van het voorbeeld.
• In verband met de vorige 2 nadelen, kan het gebruik van toggle() voor iets dat specifiek verborgen of specifiek wordt weergegeven, verwarrend zijn voor anderen die uw code lezen, omdat ze niet weten op welke manier ze zullen schakelen.

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

.

Weergave wijzigen met hide()/show()

Javascript:

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

Pluspunten:

• Werkt altijd.
• Na het zichtbaar maken keert het terug naar de vorige weergavewaarde.
• Je weet altijd naar welke staat je wisselt, zodat je:
  1. hoef geen if-instructies toe te voegen om de zichtbaarheid te controleren voordat de status wordt gewijzigd als de status ertoe doet.
  2. zal anderen die uw code lezen niet in verwarring brengen over naar welke status u overschakelt, als de status ertoe doet.
• Intuïtief.

Nadelen:

• Als je een toggle wilt imiteren, moet je eerst de status controleren en dan naar de andere status overschakelen. Gebruik in plaats daarvan toggle() hiervoor. Raadpleeg p2 van het voorbeeld.

Voorbeeld: https://jsfiddle.net/k0ukhmfL/

.

Over het algemeen zou ik zeggen dat het het beste is om hide()/show() te gebruiken, tenzij je specifiek wilt dat het een schakelaar is. Ik hoop dat je deze informatie nuttig vond.

Antwoord 8, autoriteit 2%

Maak zelf verberg- en toonmethodes voor alle elementen, als volgt

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

Hierna kunt u de methoden gebruiken met de gebruikelijke element-ID’s zoals in deze voorbeelden:

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

of:

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

Antwoord 9

Vanilla JS voor klassen en ID’s

Op ID

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

Op klasse (enkel element)

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

Op klasse (meerdere elementen)

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

Antwoord 10

Ik raad Javascript aan, omdat het relatief snel en kneedbaarder is.

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

Antwoord 11

Als je het in een tabelgebruikt, gebruik dan dit:-

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