Visualizzazione risultati 1 fino 14 di 14

Discussione: Più funzioni richiamate con lo stesso onclick?

  1. #1
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito Più funzioni richiamate con lo stesso onclick?

    Ciao a tutti, volevo un chiarimento da parte vostra.

    Il mio intento è quello di creare due div diversi (chiamiamoli "pippo" e "pluto") che abbiano al caricamento un display impostato su "none" e che poi alternativamente possano essere resi visibili cliccando su un pulsante a loro assegnato (quindi se si vede pippo, pluto sarà invisibile, mentre se vogliamo vedere pluto diventerà invisibile pippo).
    Per fare ciò ho modificato un codice javascript utile a far comparire e scomparire determinati elementi selezionati tramite "id" e il codice così come l'ho inserito funziona perfettamente:

    Codice HTML:
    <html>
    <head>
    <script language="javascript" type="text/javascript">
    function selezione1(id) {
    	if (document.getElementById) {
    		document.getElementById("pippo").style.display="block" ;
    		document.getElementById("pluto").style.display="none" ;
    	}
    }
    function selezione2(id) {
    	if (document.getElementById) {
    		document.getElementById("pluto").style.display="block" ;
    		document.getElementById("pippo").style.display="none" ;
    	}
    }
    </script>
    </head>
    
    <body>
      <div id="pippo" style="display:none">Questo è il div di Pippo</div>
      <div id="pluto" style="display:none">Questo è il div di Pluto</div>
      <p><a href="#" onclick="selezione1 ();">Mostra Pippo e nascondi Pluto</a></p>
      <p><a href="#" onclick="selezione2 ();">Mostra Pluto e nascondi Pippo</a></p>
    </body>
    </html>
    Il punto è il seguente:
    così come ho impostato il codice è personalizzato solo per questi due elementi, mentre io vorrei fare in modo di poterlo riutilizzare n volte che voglio.
    L'intento era quello di creare queste due funzioni nell'head:

    Codice HTML:
    <script language="javascript" type="text/javascript">
    function selezione1(id) {
    	if (document.getElementById) {
    		document.getElementById(id).style.display="block";
    	}
    }
    function selezione2(id) {
    	if (document.getElementById) {
    		document.getElementById(id).style.display="none" ;
    	}
    }
    </script>
    per poi richiamarle entrambe in ogni link specificando gli id desiderati.

    Il punto è questo, come posso richiamare più funzioni nello stesso link e utilizzando lo stesso onclick?

  2. #2
    Guest

    Predefinito

    Ciao zyro, per fare quello che chiedi il modo migliore è usare jquery (rapidissimo da includere nelle tue pagine) e in particolare la funzione toggle: http://api.jquery.com/toggle/

  3. #3
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito

    Grazie per la risposta helpcode, toggle è una buona alternativa a quello che ho già fatto (tra l'altro aggiungendo la libreria forse dovrebbe leggermelo anche in explorer giusto?), ma la mia domanda rimane sempre la stessa:
    voglio realizzare una funzione che mi permetta di rendere visibile un div e invisibile un altro in base al pulsante selezionato e che possa riutilizzare n volte nel caso abbia nella stessa pagina più situazioni simili (in modo da evitare di dover ricopiare lo stesso codice più e più volte editando le parti necessarie, col rischio di commettere errori).

  4. #4
    Guest

    Predefinito

    Ciao, potrebbe esserti utile una di queste soluzioni?

    http://jsbin.com/erejob/4/edit

    http://jsbin.com/amokum/1/edit

    http://jsbin.com/icezos/1/edit

    Ognuna delle tre fa quello che chiedi (se ho capito bene), ma ha un funzionamento diverso, ognuno con dei pro e dei contro.
    Ultima modifica di helpcode : 16-08-2013 alle ore 17.01.00

  5. #5
    L'avatar di dementialsite
    dementialsite non è connesso Super Moderatore
    Data registrazione
    19-10-2004
    Residenza
    fuori Padova
    Messaggi
    5,046

    Predefinito

    Se non vuoi usare JQuery o altri framework, puoi benissimo concatenare le due funzioni dentro l'onclick:
    Codice HTML:
      <p><a href="#" onclick="selezione1('pippo');selezione2('pluto');">Mostra Pippo e nascondi Pluto</a></p>
      <p><a href="#" onclick="selezione1('pluto');selezione2('pippo');">Mostra Pluto e nascondi Pippo</a></p>
    In questo caso non dovresti avere problemi, ma tieni conto che l'esecuzione delle funzioni è sequenziale e che gli effetti della prima potrebbero comportare conseguenze sulla seconda...

    Stammi bene...
    Le questioni tecniche hanno risposte migliori nel forum pubblico, non trovi?

    When you don't know your next step... improvise

    ALTERVISTA WANTS YOU!
    Vuoi diventare moderatore su AlterVista? Scopri come...

  6. #6
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito

    Ho notato che con jquery in effetti, caricando le librerie, ie è costretto a leggere bene le funzioni inserite, il che è un bene perché col solo js avrei avuto poca interattivitaà con quel browser.
    Eventualmente come potrei impostare una funzione del genere in jquery, toggle ho notato non fa altro che far girare le funzioni una dietro l'altra sullo stesso pulsante, ma io ho bisogno che entrambe le funzioni vengano attivate allo stesso tempo e naturalmente una volta sola.

  7. #7
    Guest

    Predefinito

    Con jquery puoi riassumere il tutto (senza funzioni) nel onclick:

    Codice HTML:
    <a onclick="$('#idPrimoDiv').hide(), $('#idSecondoDiv').show()">PrimoLink</a>
    <a onclick="$('#idPrimoDiv').show(), $('#idSecondoDiv').hide()">SecondoLink</a>
    Comunque sia ti consiglio di guardare quei codici che ti ho postato nel mio post precedente...sono tutte alternative molto valide che secondo me fanno al caso tuo. Inoltre le si possono sempre "tradurre" con jQuery. Fammi sapere!

  8. #8
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito

    Ciao Helpcode, le funzioni che hai scritto prima sono senz'altro valide, ma non fanno altro che cambiare lo stato di una selezione cliccando sul medesimo pulsante, quello che serve a me è diverso.
    Cerco di spiegarmi con un esempio pratico: voglio creare un form mail per ricevere informazioni da parti di utenti che lo compilano, ma le iformazioni devono essere personalizzate. Diciamo che all prima domanda del form ti chiedo che squadra tifi e ti do le varie opzioni, poi, in base alla scelta che hai fatto (tipo se hai selezionato Juve, anziché Milan o Inter), ti faccio uscire un elenco dei giocatori della squadra scelta per proseguire con il form. Naturalmente la scelta di una lista esclude tutte le altre e in tal modo cliccando su un pulsante devo fare in modo che una sola lista venga scoperta e le altre no, ma se poi cambiano idea devo far sì che cliccando su un'altra squadra scompaia l'elenco della prima squadra e compaia quello della seconda.
    Questo era un banale esempio ma spero di aver reso bene l'idea. Le funzioni che mi hai consigliato tu agiscono sullo stesso pulsante e potrei far comparire più liste contemporaneamente, cosa che non deve accadere.

    Comunque ho provato a esportare il tutto in jquery (non ho mai smanettato con questo linguaggio, quindi potrebbe esserci un modo più semplice rispetto a come l'ho scritto io)
    Ecco il codice come l'ho esportato:

    Codice HTML:
    <html>
    <head>
    <script language="javascript" type="text/javascript">
    $(document).ready (function() {
    	$("#pippo, #pluto").hide();
    	
    	 $("#alfa").click(function(){
    		 $("#pippo").fadeIn("fast");
    		 }),
    	 $("#alfa").click(function(){
    		 $("#pluto").fadeOut("fast");
    		 });
    	
    	 $("#beta").click(function(){
    		 $("#pluto").fadeIn("fast");
    		 }),
    	 $("#beta").click(function(){
    		 $("#pippo").fadeOut("fast");
    		 });
       });
    </script>
    </head>
    <body>
    <div style="width:400px; height: 200px; background-color:#09F; margin:auto; padding: 50px">
      <div id="pippo" style="height:100px; background-color:#3F0">Io sono un concorrente</div>
      <div id="pluto" style="height:100px; background-color:#FF0">Io non partecipo a nessun ocncorso</div>
      <p id="alfa"><a href="#">Sono un concorrente</a></p>
      <p id="beta"><a href="#">Sono un nuovo utente</a></p>
    </div>
    </body>
    </html>
    L'effetto però non mi piace molto, perché per un po' fa vedere entrambi i div insieme.

    Qualche modifica o consiglio in merito?

    Edit: aspetta, ho appena usato l'ultimo tuo codice Helpcode, semplice come efficace, è la trasposizione in jquery di quello che mi serviva. Però non funziona in ie, come posso fare per farlo funzionare anche su explorer?
    Ultima modifica di zyro : 17-08-2013 alle ore 14.26.31

  9. #9
    Guest

    Predefinito

    Risolvi così: http://jsbin.com/uZiPAfo/1/edit

    In questo modo la funzione fadeIn viene eseguita solo DOPO che fadeOut è terminata.
    Ultima modifica di helpcode : 17-08-2013 alle ore 14.25.52

  10. #10
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito

    Citazione Originalmente inviato da helpcode Visualizza messaggio
    Risolvi così: http://jsbin.com/uZiPAfo/1/edit

    In questo modo la funzione fadeIn viene eseguita solo DOPO che fadeOut è terminata.
    Great friend, i love you soo much for this! (in senso figurato )

    Un'ultima domanda legata sempre a quell'adorabile Ie.

    Perché se esporto il tuo link su Ie mi funge tutto, mentre se esporto solo il codice nella mia pagina no?
    Può essere legato alla versione di jquery? Io ho la 1.9.0

  11. #11
    Guest

    Predefinito

    Controlla la documentazione di fadeIn e fadeOut in merito alla compatibilità di IE.
    Che versione di IE stai usando?

    E comunque, lascia perdere InternetExplorer!! :) I browser DECENTI per un web ALL'AVANGUARDIA sono Chrome e Firefox e Safari. Iniziamo tutti quanti a dimenticarci IE. I loro utenti prima o poi capiranno e cambieranno browser: FINALMENTE!

  12. #12
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito

    Credo di avere installata la versione 9, ma tanto la uso solo per verificare se ci sono incompatibilità di script, di solito navigo con Chrome e in alcuni casi con firefox. Ie l'ho abbandonato nel momento steso in cui ho attaccato la mia prima connessione internet, tant'è che quando faccio un sito metto un link con una finestrella in cui inserisco le varie incompatibilità con questo o quel browser se ci sono e con ie ci sono sempre.
    In questo caso però non si tratta di pura navigazione o bellezza del sito, devo realizzare un form che non mi crei problemi con nessun utente (anche quelli di ie).

  13. #13
    Guest

    Predefinito

    Sei sicuro di includere bene jquery? Controlla la console per vedere quali errori si scatenano.

  14. #14
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito

    Sì sì, il percorso è corretto, anche perché uso un programma anche grafico che mi permette di incorporare css e cms semplicemente trascinandoli nel file, quindi sotto quel punto di vista non posso sbagliare neanche volendo.
    Devo provare a scaricare l'ultima versione per vedere se è lì il problema, ancora sulla versione 9 del browser alcune funzionalità del jquery 1.9.0 sono state cancellate.

    Ti faccio sapere appena potrò verificare.

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •