realizzare apertura e chiusura div dinamico

[lorenzo84]

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?

<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:

<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]

Ti mostro un esempio di che soluzione adotterei io

<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]

Ti mostro un esempio di che soluzione adotterei io

<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?

 

[Nefyt]

ciao! scusa se ti rispondo ora. praticamente non funziona. non chiude i rispettivi link. mi aiuti?

A me li chiude correttamente, assicurati di aver sistemato bene il codice, sennò non so che dirti perché a me funziona con chrome