[JQUERY] toggle che cambia

**alemix** · 19-09-2014, 10:45

Salve,

Sto cercando di studiare un po di Javascript e Jquery, ma sto capendo poco e nulla. Diciamo che per ora mi diverto più che altro con le animazioni di Jquery.

Ora la questione è semplice... so che sarà una cavolata ma non trovo quello che mi serve.

Devo praticamente creare un pulsante che apre e chiude un div, fin qua semplice uso toggle() e ci siamo... l'unica difficoltà, sta nel modificare il contenuto del toggle...

Uso una classe per richiamare la funzione click... e da codice html ci ho scritto dentro la parola Nascondi (il div è visibile in partenza) se ci clicco, lui la nasconde, ma la parola rimane sempre Nascondi, io vorrei cambiarla con Visualizza per esempio, tutte le funzioni che ho visto cambiano il contenuto, tipo replacewith, però senza un if non hanno senso... e sto cercando di capire come dire if(contenuto=='Nascondi)... elseif(contenuto=='Visualizza')...

Sto Googlando un po ma poi tra tutte le guide mi perdo

**cavicchiandrea** · 19-09-2014, 11:07

vediamo il codice jquery e html della pagina (depurato di eventuale codice php/asp/aspx etc...)

**alemix** · 19-09-2014, 15:29

E' proprio quella la questione, non capisco minimamente come gestirmi il codice.

Avevo provato così in attesa di nuove soluzioni,

codice:

 $(document).ready(function() {
	 $(".hidetitle").click(function(){
	 $('.contenentlastcover').toggle('fast');
	 if (document.getElementById(".hidetitle").innerHTML=="Nascondi")
          $('.hidetitle').replacewith("Visualizza");
	 else
           $('.hidetitle').replacewith("Nascondi");
	 });
      });

Ma come dicevo non so se la strada è lontanamente giusto

**Enzaccio** · 20-09-2014, 01:39

In questa versione in puro JavaScript ti ci ritrovi ?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>pure-JS toggle</title>


<script type="text/javascript">

function showHide(){

     if(document.getElementById("container").style.display=="none"){

 document.getElementById("container").style.display="";
 document.getElementById("trigger").value="Nascondi";

 } else {

 document.getElementById("container").style.display="none";
 document.getElementById("trigger").value="Mostra";

 }
}
</script>

</head><body>

<input id="trigger" value="Nascondi" onclick="showHide();" type="button">

<div id="container" style="border: 1px dashed blue"><h2>
 bla . . . <br>bla . . . bla . . . bla . . . bla . . . <br>
 bla . . . bla . . . bla . . . bla . . . </h2>
</div>

</body>
</html>

**alemix** · 20-09-2014, 09:47

Grazie... Più che altro penso di avere un problema nel capire la struttura di JS, sono abituato a programmare in PHP e così mi perdo un po, mi ci devo abituare...

Questo funziona, ora me lo sistemo un po come voglio... l'unica cosa che vorrei applicargli le Jquery per avere le animazioni (quindi invece di usare il toggle userò la funzione show() e hide().
Altra cosa, ho visto che tu hai un pulsante per mostrare e nascondere... però a me servirebbe più un div con una scritta... solo che non riesco a cambiare la scritta, mi apre e chiude niente Apri/Nascondi, ho provato ad usare .style.display

chiedo per curiosità, qua si usa il getElementById (è case sensitive il comando?) ed ho visto che esiste anche il getElementByClassName che dovrebbe invece che prendere gli id le classi, ma non funziona... come mai?

PS: Ho modificato il codice così...

codice:

$(document).ready(function() {
     $(".hidetitle").click(function(){
        if($('.hidetitle').text()=='Nascondi'){
           $('.contenentlastcover').hide('fast');
           $('.hidetitle').text('Visualizza');
        }
        else{
           $('.contenentlastcover').show('fast');
           $('.hidetitle').text('Nascondi')
        }
     });
      });

Ok funziona perfettamente... non capivo perchè non mi prendeva l'if ma a quanto pare avevo scritto qualche cosa sbagliato e non me ne ero accorto!

**cavicchiandrea** · 20-09-2014, 10:49

Originariamente inviata da alemix

Grazie... Più che altro penso di avere un problema nel capire la struttura di JS, sono abituato a programmare in PHP e così mi perdo un po, mi ci devo abituare...

Non ci vedo tutte queste grosse differenze, ritengo sia più piace/non piace il linguaggio e se è la seconda (non piace) l'apprendimento è più difficile sarà capirlo ed assimilarlo

Questo funziona, ora me lo sistemo un po come voglio... l'unica cosa che vorrei applicargli le Jquery per avere le animazioni (quindi invece di usare il toggle userò la funzione show() e hide().

Il toggle e hide/show non sono la stessa animazione con una diversa logica

Altra cosa, ho visto che tu hai un pulsante per mostrare e nascondere... però a me servirebbe più un div con una scritta... solo che non riesco a cambiare la scritta, mi apre e chiude niente Apri/Nascondi, ho provato ad usare .style.display

chiedo per curiosità, qua si usa il getElementById (è case sensitive il comando?)

Non è solo il DOM (document.getElement....) ad essere case sensitive ma tutto il javascript (pertanto anche jquery)

ed ho visto che esiste anche il getElementByClassName che dovrebbe invece che prendere gli id le classi, ma non funziona... come mai?

Non funziona perché manca un s getElementsByClassName e ricordati che è "considerata" una collezione di oggetti (che vanno da 0 primo oggetto con quella classe ad x ultimo oggetto) pertanto se richiami document.getElementsByClassName("nomeclasse").inne rHTML non funzionerà mai perché manca a quale "numero" con quella classe ti riferisci ma funzionerà cosi document.getElementsByClassName("nomeclasse").item (0).innerHTML (che equivale al primo oggetto) .
Queste sono comunque tutte nozioni che un libro o una guida possono darti.

PS: Ho modificato il codice così...

codice:

$(document).ready(function() {
     $(".hidetitle").click(function(){
        if($('.hidetitle').text()=='Nascondi'){
           $('.contenentlastcover').hide('fast');
           $('.hidetitle').text('Visualizza');
        }
        else{
           $('.contenentlastcover').show('fast');
           $('.hidetitle').text('Nascondi')
        }
     });
      });

Ok funziona perfettamente... non capivo perchè non mi prendeva l'if ma a quanto pare avevo scritto qualche cosa sbagliato e non me ne ero accorto!

Sicuro che vada bene? Come l'hai scritto cambierai tutti i testi della classe hidetitle (oltre ad aprirà e chiuderà tutti gli oggetti con classe contenentlastcover) presenti nel documento non solo quello cliccato è quello che vuoi?

P.S.
Prima di usare jquery studiati bene il javascript, altrimenti non conoscendo il linguaggio userai male il framework e con molte più difficoltà.

**alemix** · 20-09-2014, 12:05

Originariamente inviata da cavicchiandrea

Non ci vedo tutte queste grosse differenze, ritengo sia più piace/non piace il linguaggio e se è la seconda (non piace) l'apprendimento è più difficile sarà capirlo ed assimilarlo

No ma più che altro ho cominciato da veramente poco con Javascript/Jquery, e purtroppo non trovo un libro, guida online che spiega come dico io... Ho già basi di programmazione, quindi o partiamo ad un livello troppo basso, oppure di solito partono ad un livello più avanzato e mi perdo nelle spiegazioni...

Cmq quello che intendevo e la differenza nel considerare il tutto, diciamo che Java è più orientato ad oggetti, e sono meno abituato.

Originariamente inviata da cavicchiandrea

Il toggle e hide/show non sono la stessa animazione con una diversa logica Non è solo il DOM (document.getElement....) ad essere case sensitive ma tutto il javascript (pertanto anche jquery) Non funziona perché manca un s getElementsByClassName e ricordati che è "considerata" una collezione di oggetti (che vanno da 0 primo oggetto con quella classe ad x ultimo oggetto) pertanto se richiami document.getElementsByClassName("nomeclasse").inne rHTML non funzionerà mai perché manca a quale "numero" con quella classe ti riferisci ma funzionerà cosi document.getElementsByClassName("nomeclasse").item (0).innerHTML (che equivale al primo oggetto) .
Queste sono comunque tutte nozioni che un libro o una guida possono darti.

Che io sappia hide/show cambiano il display:block/none del css, stessa cosa che mi hai consigliato tu con JS no?

Per la question della classe era solo per capire come mai non lo prendeva

Originariamente inviata da cavicchiandrea

Sicuro che vada bene? Come l'hai scritto cambierai tutti i testi della classe hidetitle (oltre ad aprirà e chiuderà tutti gli oggetti con classe contenentlastcover) presenti nel documento non solo quello cliccato è quello che vuoi?

P.S.
Prima di usare jquery studiati bene il javascript, altrimenti non conoscendo il linguaggio userai male il framework e con molte più difficoltà.

Diciamo che va bene, ho capito cosa intendi, però diciamo che è una classe che uso una sola volta in tutto il documento ed è esattamente li che la uso... quindi funziona bene... in caso mi basta modificare il .title con #nuovoid e cmq continuerebbe a funzionare splendidamente.

Per il fatto di studiare, diciamo che anche se è abbastanza sbagliato, studio con la pratica, diciamo che mi esercito con degli esercizi o progetti pian piano... anche perchè come dicevo inizialmente non riesco a trovare un qualche cosa come dico io (sono abbastanza noioso sul fattore studio

)

**cavicchiandrea** · 20-09-2014, 12:43

Usare una classe per un solo oggetto è sbagliato meglio usare l'id.
L'unico libro jquery in italiano e Jquery di apogeo in inglese c'è molto di più (vedi sito jquery.com) ma tutti spiegano il funzionamento e il concetto del framework non il javascript che si da per scontato che si conosca essendo uno strumento di supporto non una alternativa al javascript.
Lo studio ad esercizi lo capisco lo uso anch'io, ma ricordati che non avere le basi e la logica del linguaggio ti creerà molto più difficoltà nel capire e sviluppare, e non confondere java con javascript sono due linguaggi completamente diversi il primo potrà (non lo conosco) essere sviluppato ad oggetti il secondo no.
L'apprendimento per osmosi non hanno ancora inventato, pertanto leggiti un libro js (livello medio) poi prenditi jquery apogeto. Sviluppare all'occorrenza cose che non si conosce è più lungo e dispersivo e dovrai spesso chiedere aiuto e non credo sia la soluzione migliore.
Tutto questo discorso vale se credi/pensi che la programmazione sia/sarà nel tuo ambito lavorativo/hobbistico il futuro, se è solo limitato a questo progetto, come non detto.

**Enzaccio** · 20-09-2014, 17:33

Originariamente inviata da alemix

... ho visto che tu hai un pulsante per mostrare e nascondere... però a me servirebbe più un div con una scritta... solo che non riesco a cambiare la scritta ...

Un INPUT ha un .value mentre un DIV ha un .innerHTML da assegnargli via JavaScript.

Ho anche variato la logica dello SCRIPT in una forma che tuttavia rimane analoga :
le istruzioni di assegnazione che comunque vanno eseguite, sono tratte fuori dall' IF/ELSE Statement ed eseguite al concludersi della funzione; la condizionale si occupa di valorizzare diversamente due variabili che ho chiamato how e say (ma le puoi anche chiamare Giorgio e topo).

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>pure-JS toggle 2</title>


<script type="text/javascript">

function showHide(){

     if(document.getElementById("container").style.display=="none"){
        how="";
        say="Nascondi";
 } else {
        how="none";
        say="Mostra";
 }

 document.getElementById("container").style.display=how;
 document.getElementById("trigger").innerHTML=say;

}
</script>

</head><body>

<div id="trigger" onclick="showHide();" 
  style="width: 80px; padding: 3px; text-align: center; border: 1px solid black"
>Nascondi
</div>

<div id="container" style="border: 1px dashed blue"><h2>
 bla . . . <br>bla . . . bla . . . bla . . . bla . . . <br>
 bla . . . bla . . . bla . . . bla . . . </h2>
</div>

</body>
</html>

Per il resto, Andrea dixit.
Non mi posso dilungare, ma non è vero che online non si trovino corsi/tutorial, è però vero che avviarsi come dici te con qualche esercizio come questi, diventa meno pesante e si smanetta prima ...

Discussione: [JQUERY] toggle che cambia

Strumenti discussione

Ricerca discussione

Visualizza

[JQUERY] toggle che cambia

Keep it simple !

Permessi di invio