Animation su ciclo
- Questo topic ha 3 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 11 anni, 5 mesi fa da jqueryitalia.
- AutorePost
- 19 Ottobre 2012 alle 17:37 #3633swim89Partecipante
Ciao a tutti, ho un ciclo foreach di php che mi estrae dei dati dal DB. Tra questi dati mi estrae anche un campo “percentuale” che mi serve per la creazione di una specie di grafico.
Ho impostato nell’head il valore width=0 per tutti i div con classe “colore”.
Vorrei che per ogni dato estratto, con la funzione animation, andasse a modificare il valore di width in base a quello estratto.
Ho provato mettendo questo all’interno del ciclo foreach ma non fa nulla:<?php foreach (elezione->candidato as $candidato){ $c++; ?> $(document).ready(function(){ $('a[href=#]').click(function(){ $('.colore').each( $('div.colore#candidato').animate({width:'<?php echo percentuale; ?>'},300); return false }); }); }); <div style="background-color:"> <?php echo nome; ?> <div class="colore" id="candidato"> foreach percentuale;?> voti;?>
Sapete dirmi dove sbaglio per favore?
10 Novembre 2012 alle 18:13 #3737jqueryitaliaAmministratoreCiao Swim89 e benvenuto.
Chiedo scusa per il ritardo nella risposta, ma mi era sfuggito il tuo post.
Il tuo errore è dovuto al fatto che nel ciclo metti lo stesso ID a tutti i div di classe colore.
Inoltre eviterei:- di eseguire un ciclo e creare un’infinità di document.ready.
- di richiamare un click ad un’ancora con #
La mia personale soluzione è la seguente:
Codice JAVASCRIPT:$(document).ready(function(){ $('#showdata').click(function(){ $('.colore').each( function() { var boxw = $(this).attr('rel'); $(this).css('display', 'block').animate({ 'width': ''+ boxw +'' }, 300); }); }); });
Codice PHP/HTML:
<a href="javascript:;" id="showdata">Mostra i risultati</a> <div id="result"> <?php foreach ( elezione->candidato as $candidato ) { ?> <div class="name"><?php echo nome; ?></div> <div class="colore" rel="<?php echo percentuale; ?>"><?php echo voti; ?> voti</div> <?php } ?> </div>
Codice CSS:
#result {margin-top:20px;} .name {clear:both;float:left;width:150px;margin:5px 0;padding:0} .colore {float:left;display:none;height:20px;background:#FF0000;text-align:right;margin:5px 0;color:#fff;padding-right:3px;}
Ho anche creato per te un’esempio (anche se i dati non sono estratti via PHP) che puoi vedere qui http://jsfiddle.net/Zb6V7/
10 Novembre 2012 alle 19:20 #3740swim89PartecipanteOhhh grazie 1000!!! E’ una figata pazzesca 🙂
11 Novembre 2012 alle 09:27 #3741jqueryitaliaAmministratorePrego 😀
- AutorePost
- Devi essere connesso per rispondere a questo topic.