realizzare apertura e chiusura div dinamico

lorenzo84

Utente Attivo
22 Lug 2012
239
0
16
Ho una tabella dinamica che viene generata da una query. La mia idea era di far apparire un div come lightbox con i contenuti del div che resta nascosto fino alla pressione di un link. Il problema è che essendo dinamico io posso collegare il link al div tramite un ID ma volevo un aiuto per non dover creare tante funzioni jquery quanti sono i div. mi aiutate?
Codice:
<td><a href="#" class="apri" id="1">1000 &euro</a></td>
<div id="1" > testo da visualizzare alla pressione del link in lightbox<a href="#" class="chiudi">chiudi</a></div>
<td><a href="#" class="apri" id="2">2000 &euro</a></td>
<div id="2"> testo da visualizzare alla pressione del link in lightbox<a href="#" class="chiudi">chiudi</a></div>
<td><a href="#"  class="apri" id="3">2000 &euro</a></td>
<div id="3"> testo da visualizzare alla pressione del link in lightbox<a href="#" class="chiudi">chiudi</a></div>

e il jquery che ho fatto però è fisso e non posso farne tanti quanti sono i record:

Codice:
<script type="text/javascript">
$(document).ready(function() {
 
            $(".apri").click(
            function(){
            $("#1").show("slow"); //il box apparirà più lentamente
            });
 
});
</script>
<script type="text/javascript">
$(document).ready(function() {
 
            $(".chiudi").click( //specifico un altro trigger
            function(){
            $("#1").hide(); //anche per hide vale la regola dello "slow"
            });
 
});
</script>
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Ti mostro un esempio di che soluzione adotterei io

Codice:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
    .shower{
        display:none;
    }
    </style>
<script type="text/javascript">
$(document).ready(function() {
 
          $(".apri").click(
             function(){
              var open = $(this).closest('td').index();
              $(".shower").eq(open).show("slow");
            });
            
         $(".chiudi").click(
            function(){
              var open = $(this).closest('.shower').index();
              $(".shower").eq(open).hide("slow");
         });
 
 
});
</script>
<table>
<td><a href="#" class="apri">1000 &euro</a></td>
<div class="shower"> testo da visualizzare alla pressione del link in lightbox 1<a href="#" class="chiudi">chiudi</a></div>
<td><a href="#" class="apri">2000 &euro</a></td>
<div class="shower"> testo da visualizzare alla pressione del link in lightbox 2<a href="#" class="chiudi">chiudi</a></div>
<td><a href="#"  class="apri">3000 &euro</a></td>
<div class="shower"> testo da visualizzare alla pressione del link in lightbox 3<a href="#" class="chiudi">chiudi</a></div>
</table>

Vedi se è come intendevi
 

lorenzo84

Utente Attivo
22 Lug 2012
239
0
16
Ti mostro un esempio di che soluzione adotterei io

Codice:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
    .shower{
        display:none;
    }
    </style>
<script type="text/javascript">
$(document).ready(function() {
 
          $(".apri").click(
             function(){
              var open = $(this).closest('td').index();
              $(".shower").eq(open).show("slow");
            });
            
         $(".chiudi").click(
            function(){
              var open = $(this).closest('.shower').index();
              $(".shower").eq(open).hide("slow");
         });
 
 
});
</script>
<table>
<td><a href="#" class="apri">1000 &euro</a></td>
<div class="shower"> testo da visualizzare alla pressione del link in lightbox 1<a href="#" class="chiudi">chiudi</a></div>
<td><a href="#" class="apri">2000 &euro</a></td>
<div class="shower"> testo da visualizzare alla pressione del link in lightbox 2<a href="#" class="chiudi">chiudi</a></div>
<td><a href="#"  class="apri">3000 &euro</a></td>
<div class="shower"> testo da visualizzare alla pressione del link in lightbox 3<a href="#" class="chiudi">chiudi</a></div>
</table>

Vedi se è come intendevi

ciao! scusa se ti rispondo ora. praticamente non funziona. non chiude i rispettivi link. mi aiuti?
 
Discussioni simili
Autore Titolo Forum Risposte Data
C [Retribuito] cerco programmatore per realizzare forum phpbb su altervista Offerte e Richieste di Lavoro e/o Collaborazione 0
A [Photoshop] come poter realizzare il seguente "effetto" Photoshop 4
I [Photoshop] Come realizzare immagine tonalità di grigio Photoshop 0
C [PHP] Come realizzare un tema wordpress per monetizzarlo?e dove testarlo gratis? PHP 3
F Realizzare video su Mac Mac e Software 0
D [PHP] [RETRIBUITO] cercasi esperto programmatore per realizzare applicazione in html e codice iframe PHP 0
D [RETRIBUITO] cercasi esperto programmatore per realizzare applicazione in html e codice iframe Offerte e Richieste di Lavoro e/o Collaborazione 2
L [ASP.Net] Realizzare modulo contatti PopUp ! ASP.NET 1
N Come realizzare Cookie e Privacy Policy con Iubenda Leggi, Normative e Fisco 5
N Con cosa realizzare un sito web? Webdesign e Grafica 9
elpirata Realizzare video con immagini testo e transizioni Windows e Software 5
L [HTML] Realizzare piantina prenotazione posti HTML e CSS 4
P [PHP] Realizzare un controllo accessi cantiere, problema lettore Qrcode... PHP 0
M [Photoshop] come realizzare un effetto speciale? Photoshop 1
Z È possibile realizzare DEM con Adobe Muse? Webdesign e Grafica 0
asevenx Realizzare modulo per selezionare elementi da una lista PHP 1
Silvio Losi Come realizzare una piattaforma "ad-hoc" (No CMS) E-Commerce 8
E realizzare una mappa personale e responsive HTML e CSS 6
E Realizzare una finestra overlay con caricamento pagina html HTML e CSS 3
Gabriele Visioli Realizzare e Vendere siti web senza aprire una Partita IVA... Come? Leggi, Normative e Fisco 4
B realizzare una introduzione per un sito web Javascript 4
S Come realizzare una didascalia a comparsa su un'immagine? HTML e CSS 1
L Realizzare script con grafico e tabelle che si aggiornano automaticamente jQuery 1
T Come potrei realizzare un piccolo forum di discussione su un sito web...? phpBB 2
C cerco un web master per realizzare sito professionale Offerte e Richieste di Lavoro e/o Collaborazione 6
S realizzare un' area di login completa costo... Offerte e Richieste di Lavoro e/o Collaborazione 2
L Realizzare tabella che aggiorna i prezzi in base alle quantità jQuery 16
L Realizzare applicazione per hotel con camere disponibili PHP 2
G [GRATUITO]Cercasi webdesigner (per realizzare template) Offerte e Richieste di Lavoro e/o Collaborazione 7
Carlito's Come realizzare uno script Javascript 2
M [Cerco Collaborazione] un bravo esperto per realizzare insieme un sito web? Offerte e Richieste di Lavoro e/o Collaborazione 8
T [risolto] Realizzare un form email con multi scelta Sviluppo app per Android 2
G C++ realizzare apps per iOS C/C++ 1
A Realizzare un mega menu con css HTML e CSS 2
L realizzare login numerico PHP 8
G Realizzare apps per iOS meno recenti Sviluppo app per iOS 1
mircop Realizzare storico consumi PHP 4
P è meglio un framework o realizzare da solo un sito? HTML e CSS 4
M devo realizzare un sito ma... Offerte e Richieste di Lavoro e/o Collaborazione 4
M per realizzare il sito passare da aruba a serve dell agenzia?? Hosting 0
D Una query complicata da realizzare PHP 33
M Consigli per sito da realizzare Joomla 0
A realizzare un catalogo in un sito web Webdesign e Grafica 3
A Realizzare il gioco del tris usando javascript, il dom e l'oggetto event-. Javascript 4
G Realizzare un'immagine con sfondo trasparente con Photoshop Photoshop 3
P realizzare presentazione multimediale x pubblicità Programmazione 0
H Qualcuno mi può indicare programmi facili per realizzare siti web facilmente HTML e CSS 14
B realizzare una buona rete lan.... Reti LAN e Wireless 1
neo996sps [codeingniter]: realizzare un semplice menu PHP 1
C consigli su come realizzare un blog avendo già un host HTML e CSS 6

Discussioni simili