Discussion :

[Spire_]

Bonjour,

J'ai une boucle en PHP qui liste plusieurs "blocs" de sujet de discussions. Dans chacun de ces blocs se trouve un bouton "répondre" qui, lorsque l'on clique dessus fait dérouler un "Hello" (pour le moment) à l'aide de .show() de jQuery. Avant de continuer je souhaiterai savoir si la façon de procéder est bonne.

Dans ma boucle PHP, je mets un compteur, qui s'incrémente à chaque passage dans la boucle.
Pour faire dérouler le "Hello" lors du clique sur le bouton "répondre", j'identifies ce bouton par un ID, cependant dans une boucle, ils ont tous le même ID, donc j'attribue à cette ID le nom de: "test . $count;" par concaténation, du coup, il n'y aura jamais vraiment le même ID.

Enfin, dans cette même boucle entre la balise <script> j'attribues cette même variable $count (compteur).

Est-ce une bonne solution ? Ceci me parraît assez lourd non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php
$count = 0;
while ($count != 12)
{
   $count++;
   echo '<div id="container">
            <div id="test' . $count . '">Répondre</div>
            <div id="toto' . $count . '" style="display: none;">Hello</div>';
?>
<script>
   $("#test<?php echo $count; ?>").click(function () {
      $("#toto<?php echo $count; ?>").show("fast");
   });
</script>
<?php
   echo '</div>';
}
?>

Au plaisir de vous lire.

[Bovino]

Non, ce n'est pas la meilleure solution.
Tu peux facilement factoriser ton code JavaScript en attribuant une classe unique à tous les boutons.
En revanche, l'attribution d'un id incrémentés pour les éléments est la bonne façon de faire, qui te permettra de retrouver le bloc lié au bouton cliqué. Sinon, tu peux aussi utiliser les sélecteurs de recherche transversale (comme .next('div')) mais cela rend selon moi le code trop dépendant de la structure HTML.

Si tu rajoutes la classe "expand" par exemple à tes div 'testX', le code pourrait être le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('.expand').click(function(){
    var num = this.id.replace(/\D/g, '');
    $('#toto' + num).show();
});

[Spire_]

Merci pour ta réponse,

Voici donc mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php
$count = 0;
while ($count != 12)
{
   $count++;
   echo '<div id="container">
            <div id="test' . $count . '" class="expand">Répondre</div>
            <div id="toto' . $count . '" style="display: none;">Hello</div>';
?>
<script>
   $(".expand").click(function(){
      var num = this.id.replace(/\D/g, '');
      $('#toto' + num).show();
   });
</script>
<?php
}
?>

Il fonctionne, et donc ceci est donc un moyen plus approprié ? C'est bien comme ça que tu penses qu'il doit être ?

[SpaceFrog]

pourquoi pas juste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 $(".expand").click(function(){
      $('this').next("[id^='toto']").show();
   });

voire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 $(".expand").click(function(){
      $('this').next("div").show();
   });

[Spire_]

Merci à vous,

Résolu.

[Bovino]

pourquoi pas juste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 $(".expand").click(function(){
      $('this').next("[id^='toto']").show();
   });

tu peux aussi utiliser les sélecteurs de recherche transversale (comme .next('div')) mais cela rend selon moi le code trop dépendant de la structure HTML.

@Spire_ : tu n'as pas à mettre le script dans le while en PHP. Une seule fonction suffit !

[Spire_]

Oui oui je l'avais enlevé, mais sur le coup je l'avais encore laissé dans le while. Merci à vous.