3 document.ready

Pubblicato il di

Dato il seguente codice HTML:

<body>
<h1> FLI ANIMALI</h1>
<p id="p1"> MAMMIFERI </p>
<p class="dettagli">
    I mammiferi (Mammalia, Linnaeus 1758) sono una classe di vertebrati appartenenti al phylum
    dei cordati , a diffusione cosmopolita....</p>
<p id="p3"> PESCI </p>
<p class="dettagli">
    Con il termine pesci, dal latino pisces, si intendono un gruppo eterogeneo di organismi
    fondamentalmente acquatici, che nelle vecchie tassonomie assurgeva a classe sistematica
    dei vertebrati.
</p>

<input onclick="mostra();" type="button" value="MOSTRA DETTAGLI">
<input onclick="nacondi();" type="button" value="NASCONDI DETTAGLI">

</body>

con il seguente stile CSS

<style type="text/css">
    .dettagli {border:dashed 1px blue;}
</style>

Vogliamo che venga mostrato solo il bottone mostra dettagli che se premuto mostrerà i dettagli e farà apparire il bottone nascondi settagli, il quale riporterà alla situazione di partenza.

Teniamo presente che se ci fosse altro codice dopo il bottone che viene coinvolto dallo script del bottone e se a caricamento della pagina il codice e gli elementi non fossero stati ancora caricati (per una eventuale lentezza), se l’utente premesse il bottone, lo script associato, non trovando ancora gli elementi interessati , potrebbe generare un errore. Si può ovviare al problema in maniere differenti. Il primo, inseriamo il codice js nel punto preciso dove deve lavorare, quindi coinvolgendo gli elementi interessati solo dopo che vengono caricati.

Il secondo metodo, è quello di usare il metodo ready che permette di seguire il codice solo dopo che la pagina è stata caricata

$(document).ready()

All’interno del metodo ready inserisco una funzione (passaggio di funzione come parametro ad un ‘altra funzione). Tale funzione sarà una funzione particolare chiamata funzione anonima perché priva di nome. Questo perché è vietato inserire direttamente istruzioni come parametri di una funzione.

$(document).ready( function () { } )

Come si nota la funzione passata come parametro al metodo ready non ha nessun nome, all’interno delle graffe inserirò le mie istruzioni.

$(document).ready( function () { 
    nascondi();
} )

Nelle istruzioni della funzione anonima passata come parametro richiamo un’altra funzione chiamata nascondi(). Siccome la funzione nascondi è inserita come parametro del metodo ready, anche il codice ad esso associato verrà eseguito dopo il caricamento di tutta la pagina, indipendentemente dove metto il codice.

Il primo metodo comunque è più semplice e meno contorto, quindi volendo utilizzarlo basterà inserire il nostro codice appena prima della chiusura del tag </body> in questo modo

<script type="text/javascript">
    nascondi();
</script>
</body>

Richiamo semplicemente la funzione nascondi() prima della chiusura di body.

Usate il metodo che preferite, ma adesso vediamo la funzione nascondi:

function nascondi() {
    $('.dettagli').hide();
}

Con Jquery basta selezionare gli elementi con classe dettagli e poi uso il metodo hide() per nasconderli. Devo anche far sparire il bottone nascondi (che deve riapparire dopo), un primo modo può essere quello di assegnare un id al bottone

<input onclick="nacondi();" id="nascondi" type="button" value="NASCONDI DETTAGLI">

e con jQuery agganciare by id

$('#nascondi').hide();

Un altro modo è quello di selezionare per valore di un attributo :

$('input[value~="NASCONDI"]').hide();

seleziona il tag input, come selettore dell’attributo desiderato, che ha come value la parola NASCONDI. Da notare l’operatore che contiene ( ~= )

Altro modo è selezionare per valore di onclick

$('input[onclick~="nascondi();"]')

In questo caso il valore di onclick è nascondi(); completo

Vediamo la funzione mostra

$('*:hidden').show();

con asterisco selezione tutto con i due punti (tecnica simile alle pseudoclassi css) selezioni tutto quello che è nascosto col show applico il metodo per mostrare.

Ora manca far sparire il bottone nascondi dettagli

$('input[value~="MOSTRA"]').hide();

e ovviamente aggiungere alla funzione nascondi() il comando per far comparire il pulsante mostra dettagli

$('input[value~="MOSTRA"]').show();

Il complementare dell’attributo hidden è visible e gli operatori sono diversi:

  • = ESATTAMENTE UGUALE
  • ~= CONTIENE
  • != DIVERSO
  • ˆ= INIZIA CON
  • $= FINISCE CON