Problema pulizia codice jquery

Evil_Majesty · **Iscritto il:** mer mar 11, 2009 9:26 pm **Messaggi:** 3

Salve a tutti! Questa dovrebbe essere la sezione adatta, ma nel caso non lo sia, prego i moderatori di spostare il topic.
Come da titolo, ho implementato una piccola funzione utilizzando jquery. Purtroppo però, essendo ancora un niubbo, ho sicuramente scritto un codice più lungo e ripetitivo di quello che potrebbe essere. Vorrei chiedervi dunque il favore di aiutarmi a semplificarlo e a migliorarlo.

Per semplificare meglio le cose, potete trovare ciò che ho fatto a questo indirizzo: http://www.flyareatest.altervista.org/p ... index.html

In sostanza, si tratta di una pagina con 6 link e altrettanti 6 div inizialmente nascosti. Cliccando su un link, compare il div corrispondente, che scompare cliccando nuovamente sullo stesso link attraverso la funzione fadeToggle. Cliccando su un link diverso, il div già aperto scompare con un fadeOut.

Grazie a tutti per l'aiuto!

k8 · **Inviato:** mer mar 11, 2009 10:38 pm

Benvenuto sul forum!
è un piacere aiutarti

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prove di jquery</title>
<style type="text/css">
  body {font-family:Arial, Helvetica, sans-serif; font-size:75%;}
  .toggler, .toggler1, .toggler2, .toggler3, .toggler4, .toggler5 {float: left; margin-right:10px;}
  .content, .content1, .content2, .content3, .content4, .content5 , .content6 {position:absolute; top:80px; left:20px; *top:100px; display:none;}
  .clear {clear:both;}
</style>
<script type="text/javascript" src="http://www.flyareatest.altervista.org/provafade/jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
    // jQuery fadeToggle plugin
    jQuery.fn.fadeToggle = function(s, fn){
        return (this.is(":visible"))
            ? this.fadeOut(s, fn)
            : this.fadeIn(s, fn);
    };

    // utilising fadeToggle to show/hide .content DIV
   jQuery(function($){
          $(".toggler").click(function(){
             var i,content;
             content = $(this).attr("title");
         $(".content"+content).fadeToggle();
         for(i=1; i <= 6; i++){
            if(i != content){
               $(".content"+i).fadeOut("slow");
              }
           }
        });
    });
</script>
</head>
<body>
    <h1>Prove di jquery</h1>

    <a href="#" class="toggler" title="1">Clicca1</a>
   <a href="#" class="toggler" title="2">Clicca2</a>
   <a href="#" class="toggler" title="3">Clicca3</a>
   <a href="#" class="toggler" title="4">Clicca4</a>
   <a href="#" class="toggler" title="5">Clicca5</a>
   <a href="#" class="toggler" title="6">Clicca6</a>

   <div class="clear"></div>

    <div class="content1">
        <h2>Prova 1</h2>
        <p>ciao ciao</p>
   </div>
   
    <div class="content2">
        <h2>Prova 2</h2>
      <p>prova prova</p>
   </div>
   
   <div class="content3">
        <h2>Prova 3</h2>
        <p>prova prova</p>
   </div>
   
   <div class="content4">
        <h2>Prova 4</h2>
        <p>prova prova</p>
   </div>
   
   <div class="content5">
        <h2>Prova 5</h2>
        <p>prova prova</p>
   </div>

   
   <div class="content6">
        <h2>Prova 6</h2>
        <p>prova prova</p>
   </div>
</body>

</html>

L'ho provato sembra funzionare..
Se non capisci qualcosa chiedi pure.

Evil_Majesty · **Iscritto il:** mer mar 11, 2009 9:26 pm **Messaggi:** 3

k8 ha scritto:

Benvenuto sul forum!
è un piacere aiutarti

Wow, che velocità

Ti ringrazio, la tua soluzione funziona perfettamente! Non sapevo che in JQuery funzionasse anche la sintassi normale di javascript, pensavo ne avesse una tutta sua (benchè sia in effetti una libreria Javascript)...

A questo proposito vorrei chiederti solo un paio di piccole delucidazioni: con le righe di codice

Codice:

content = $(this).attr("title");
 $(".content"+content).fadeToggle();

esattamente che cosa fai?

k8 · **Inviato:** mer mar 11, 2009 11:27 pm

Evil_Majesty ha scritto:

k8 ha scritto:

Benvenuto sul forum!
è un piacere aiutarti

Wow, che velocità

Ti ringrazio, la tua soluzione funziona perfettamente! Non sapevo che in JQuery funzionasse anche la sintassi normale di javascript, pensavo ne avesse una tutta sua (benchè sia in effetti una libreria Javascript)...

Figurati

Cita:

A questo proposito vorrei chiederti solo un paio di piccole delucidazioni: con le righe di codice

Codice:

content = $(this).attr("title");
 $(".content"+content).fadeToggle();

esattamente che cosa fai?

In pratica leggo l'attributo title del link su cui si è cliccato.
Come vedi ho aggiunto un title a tutti i link, a differenza del tuo codice:

Codice:

        <a href="#" class="toggler" title="1">Clicca1</a>
   <a href="#" class="toggler" title="2">Clicca2</a>
   <a href="#" class="toggler" title="3">Clicca3</a>
   <a href="#" class="toggler" title="4">Clicca4</a>
   <a href="#" class="toggler" title="5">Clicca5</a>
   <a href="#" class="toggler" title="6">Clicca6</a>

Quindi, se viene cliccato sul link 5, grazie al metodo attr ricaverò il numero del content che dovrà esser reso visibile con fadeToggle();
Questo è uno dei metodi.. poi si potrebbe fare anche con le regex penso, però non essendo molto abile te ne ho proposta un'altra.
Mi sono spiegato?

Evil_Majesty · **Iscritto il:** mer mar 11, 2009 9:26 pm **Messaggi:** 3

k8 ha scritto:

Mi sono spiegato?

Perfettamente!! Ancora grazie mille!

Forum programmazione

Forum di supporto alla programmazione in generale e nei principali linguaggi.

Problema pulizia codice jquery

Chi c’è in linea