Come posso hide il link “Modifica” dopo averlo premuto? e posso anche hide il testo “lorem ipsum” quando premo edit?
function showStuff(id) { document.getElementById(id).style.display = 'block'; } Edit Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
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'; }
Edit Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Puoi anche usare questo codice per mostrare / hide gli elementi:
document.getElementById(id).style.visibility = "hidden"; document.getElementById(id).style.visibility = "visible";
Nota La differenza tra style.visibility
e style.display
si ha quando si usa la visibilità: nascosto a differenza del display: none, il tag non è visibile, ma lo spazio viene allocato per esso sulla pagina. Il tag è reso, non è visto sulla pagina.
Vedi questo link per vedere le differenze.
Vorrei suggerire l’opzione JQuery .
$("#item").toggle(); $("#item").hide(); $("#item").show();
Per esempio:
$(document).ready(function(){ $("#item").click(function(event){ //Your actions here }); });
Vorrei suggerire questo per hide gli elementi (come altri hanno suggerito):
document.getElementById(id).style.display = 'none';
Ma per rendere visibili gli elementi, suggerirei questo (invece di display = ‘block’):
document.getElementById(id).style.display = '';
Il motivo è che l’uso di display = ‘block’ sta causando margini / spazi bianchi aggiuntivi accanto all’elemento reso visibile sia in IE (11) sia in Chrome (Versione 43.0.2357.130 m) sulla pagina su cui sto lavorando.
Quando carichi per la prima volta una pagina in Chrome, un elemento senza attributo di stile apparirà in questo modo nella finestra di ispezione DOM:
element.style { }
Nascondendolo usando lo standard JavaScript, questo lo rende, come previsto:
element.style { display: none; }
Rendendolo visibile di nuovo usando display = ‘block’ lo cambia in questo:
element.style { display: block; }
Quale non è lo stesso come originariamente era. Questo potrebbe benissimo non fare alcuna differenza nella maggior parte dei casi. Ma in alcuni casi, introduce anomalie.
L’utilizzo di display = ” lo ripristina allo stato originale nel DOM inspector, quindi sembra l’approccio migliore.
Dovresti pensare JS per il comportamento e CSS per le caramelle visive il più ansible. Cambiando il tuo HTML un po ‘:
Edit Lorem ipsum ...
Sarai in grado di passare da una vista all’altra semplicemente usando le regole CSS:
td.post-editing > a.post-edit-btn, td.post-editing > span.post-text, td.post > span.post-answer { display : none; }
E il codice JS che passa tra le due classi
Anche se questa domanda ha avuto risposta molte volte, ho pensato di aggiungerla con una risposta più completa e solida per i futuri utenti. La risposta principale risolve il problema, ma credo che potrebbe essere meglio conoscere / comprendere alcuni dei vari modi per mostrare / hide le cose.
.
Questo è il modo in cui l’ho fatto fino a quando ho trovato alcuni di questi altri modi.
Javascript:
$("#element_to_hide").css("display", "none"); // To hide $("#element_to_hide").css("display", ""); // To unhide
Professionisti:
Contro:
$("#element_to_hid").css("display", "inline");
altrimenti tornerà al “blocco” o qualsiasi altra cosa a cui sarà forzato. Esempio: https://jsfiddle.net/4chd6e5r/1/
.
Durante l’impostazione dell’esempio per questo, in realtà mi sono imbattuto in alcuni difetti su questo metodo che lo rendono molto molto inaffidabile.
CSS / Javascript:
.hidden {display:none} $("#element_to_hide").addClass("hidden"); // To hide $("#element_to_hide").removeClass("hidden"); // To unhide
Professionisti:
$(".hidden")
. Contro:
Esempio: https://jsfiddle.net/476oha8t/8/
.
Javascript:
$("element_to_hide").toggle(); // To hide and to unhide
Professionisti:
Contro:
Esempio: https://jsfiddle.net/cxcawkyk/1/
.
Javascript:
$("#element_to_hide").hide(); // To hide $("#element_to_hide").show(); // To show
Professionisti:
Contro:
Esempio: https://jsfiddle.net/k0ukhmfL/
.
In generale, direi che il migliore è hide () / show () a meno che non sia necessario specificarlo come interruttore. Spero che tu abbia trovato queste informazioni utili.
puoi usare la proprietà nascosta dell’elemento:
document.getElementById("test").hidden=true; document.getElementById("test").hidden=false
Crea i metodi Nascondi e Mostra te stesso per tutti gli elementi, come segue
Element.prototype.hide = function() { this.style.display = 'none'; } Element.prototype.show = function() { this.style.display = ''; }
Dopo questo puoi usare i metodi con i soliti identificatori di elementi come in questi esempi:
document.getElementByTagName('div')[3].hide(); document.getElementById('thing').show();
o:

Raccomando Javascript, perché è relativamente veloce e più malleabile.
Edit Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Se lo stai usando in una tabella, usa questo: –
Edit Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum