Fonction Jquery dynamique

Bonjour,

je pense avoir l'idéé mais c'est la réalisation qui laisse à désirer ... !!

j'affiche à l'aide d'une boucle PHP à partir de ma base de données plusieurs carrousels pour que le visiteur du site puisse faire des choix de types de templates et de couleurs pour chaque template.
Ma fonction jquery étant unique, quand je clique sur le carrousel 2 (par exemple) cela agit sur le carrousel 1...

j'ai essayé de récupérer la variable du numéro id de template de la base de donnée et de l'affecter sur les éléments de la fonction JQuery mais sans succès et puis c'est peut être lourd de faire une boucle incorporant la fonction à chaque fois...

Suis-je clair ????;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<?php  while ($rowTemplateListe=mysql_fetch_array($resTemplateListe)){
          $NumTemplateListe = $rowTemplateListe["id_template"];
          $CoulTemplateListe = explode("|", $rowTemplateListe["couleurs"]);
for($j=0; $j<count($NumTemplateListe);$j++ ) {  // A chaque N° de template
// AFFICHAGE DES IMAGETTES -- début
echo '
<div id="main_area">
<div class="row hidden-phone" id="slider-thumbs">
<div>
<ul class="thumbnails">';
        for($i=0; $i<count($CoulTemplateListe);$i++ ) {   // A chaque couleur de ce template
                echo '<li class="span2">
                       <a class="thumbnail" id="carousel-selector'.$j.'-'.$i.'">
                       <img src="'.$LienRootTempate.'/template'.$NumTemplateListe.'/'.$CoulTemplateListe[$i].'/image_xs.jpg" />
                       </a>'.$CoulTemplateListe[$i].'</li>';
}
echo '</ul></div></div>';
// AFFICHAGE DES IMAGETTES -- fin  
// AFFICHAGE DES IMAGES EN GRAND -- début  
echo '
<div class="span12" id="slider">
<div class="row">
<div class="span8" id="carousel-bounding-box">
<div id="myCarousel'.$j.'" class="carousel slide">
<div class="carousel-inner">                                                       
';
        for($i=0; $i<count($CoulTemplateListe);$i++ ) {   // A chaque couleur de ce template
                echo '<div class="item '; if ($i=='0') { echo 'active';}; echo '" data-slide-number'.$j.'="'.$i.'">
                      <img src="'.$LienRootTempate.'/template'.$NumTemplateListe.'/'.$CoulTemplateListe[$i].'/image_xl.jpg" />
                      </div>';
}
echo '</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel'.$j.'" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel'.$j.'" data-slide="next">›</a>
</div></div>';
// AFFICHAGE DES IMAGES EN GRAND -- fin  
// AFFICHAGE DU TEXTE ET DU FORMULAIRE DE CHOIX -- début  
echo '
<div class="span4" id="carousel-text'.$j.'"></div>
<div style="display: none;" id="slide-content'.$j.'">                                                  
';
        for($i=0; $i<count($CoulTemplateListe);$i++ ) {   // A chaque couleur de ce template
                echo '<div id="slide-content'.$j.'-'.$i.'">
                      <h2>Kit graphique n&deg;'.$NumTemplateListe.'</h2>
                      <p>Couleur : '.$CoulTemplateListe[$i].'</p>
                      <p class="sub-text"><a href="#">Visiter le site de d&eacute;mo</a></p>
                   <div class="form-actions">
                   <form class="form-vertical" method="post" action="index.php?cat=compte&amp;cmd=admstyles">
                      <input type="hidden" id="id_m" name="id_m" value="'.$id_membre.'" >
                      <input type="hidden" id="ChoixTempl" name="ChoixTempl" value="'.$NumTemplateListe.'" >
                      <input type="hidden" id="ChoixCoul" name="ChoixCoul" value="'.$CoulTemplateListe[$i].'" >                   
                      <button class="btn btn-primary" type="submit" name="post" value="new">Valider ce choix</button>             
                 </form>
                   </div> 
                      </div>';
}
echo '</div></div>';
// AFFICHAGE DU TEXTE ET DU FORMULAIRE DE CHOIX -- fin  
?>
<script>
  jQuery(document).ready(function($) {
    var j = <?PHP echo $j; ?>;
        $('#myCarousel'+j).carousel({
                interval: 0
        });
        $('#carousel-text'+j).html($('#slide-content'+j'-0').html());
        //Handles the carousel thumbnails
        $('[id^=carousel-selector'+j'-]').click( function(){
                var id_selector = $(this).attr("id");
                var id = id_selector.substr(id_selector.length -1);
                var id = parseInt(id);
                $('#myCarousel'+j).carousel(id);
        });
        // When the carousel slides, auto update the text
        $('#myCarousel'+j).on('slid', function (e) {
                var id = $('.item.active').data('slide-number'+j);
                $('#carousel-text'+j).html($('#slide-content'+j'-'+id).html());
        });
});
</script>
<?PHP 
  }      
echo '</div></div>';
  }