Questo semplicissimo script è reso ancora più semplice dal JQuery, il quale ci permette di snellire la grammatica. Basta infatti aggiungere, in una funzione anonima (che verrà richiamata solamente una volta), il metodo .click il quale è in grado di trasformare qualsiasi oggetto del nostro sito, un bottone cliccabile. Anche una foto, un paragrafo o una singola lettera. Per modificare l'estetica o il comportamento di un elemento basta semplicemente usare il metodo .css. Quindi semplicemente andremo a mettere una condizionale if, dove la discriminante sarà se il componente è già del colore che vogliamo; in quel caso impostiamo il comportamento contrario. Una volta fatto impostiamo l'else con il comportamento che desiderio faccia il paragrafo nascosto(tramite il CSS "display: none" in grado di eliminare il componente fino alla sua comporsa). Ricordati di inserire alla fine il return false che ha il compito di resettare una volta portato a termine il compito. Ho aggiunto un piccolo scherzetto: prova a trovare la parola segreta che - se una volta cliccata - cambia colore. NOTA BENE: se vuoi cambiare il colore di un elemento ricorda che il JQuery modifica il colore, ma usando i valore RGB e non HEX.

Lo stesso meccanismo è ripetibile utilizzando il comando .mouseover, ovvero quando la freccia del mouse è sopra l'elemento. Per far funzionare questa operazione però si necessita in abbianata anche il .mouseout ovvero quando la freccia va via dall'elemento selezionato. In uno ripetiamo il codice del bottone, mentre nell'altro invertiamo il tutto.

Porta il mouse sopra questa parola: CIAO!

In JQuery esistono anche due metodi nativi che svolgono a pieno questo incarico: .hide e .show ma hanno un difetto. Esse, per funzionare, devono avere già gli elementi costruiti dal server, questo comporta che lo script deve essere inserito nel DOM solamente dopo che il bottone è stato caricato. Non è possibile, per tanto, metterlo in uno script esterno al foglio HTML o farlo caricare con .ready. Quindi a mio avviso non sono la soluzione ideale per nascondere un elemento.

Ed ecco il codice completo:

$(function(){ | $('#click').click(function(){ | if($('#hide').css('display') == 'block') { | $('#hide').css('display','none');| } else { | $('#hide').css('display','block'); | return false; | } | }); | $('#noclick').click(function(){ | if($('#noclick').css('color') == 'rgb(138, 43, 226)'){ | $('#noclick').css('color','#999999'); | } else { | $('#noclick').css('color', '#8a2be2'); | return false; | } | }); | $('#muta').mouseover(function() { | if($('#rivela').css('display') == 'block') { | $('#rivela').css('display', 'none'); | } else { | $('#rivela').css('display', 'block'); | return false; | } | }); | $('#muta').mouseout(function() | if($('#rivela').css('display') == 'none'); | { | $('#rivela').css('display', 'block'); | } else { | $('#rivela').css('display', 'none'); | return false; | } | }); | });