Afficher cacher Div avec un ID auto incrémental

Par khaledBoussoffara, il y a 10 ans

PHP

Bonjour :) j'affiche dynamiquement des div à partir de la base et j'associe à chaque div une valeur d'ID de cette façon
while($row = $req->fetch())
{
echo'<button class="lien">Afficher détails</button>';
echo '<div class="sub_div"' .'id="' .++$i .'"' .'>';
echo'</div>';
}

Je veux que chaque bouton affiche la div courante on click , le probleme que tous les boutons generérs par la requete appliquent l'affet
de hide show seulement à la premiere div ?
y a t il une solution ? merci

12 réponses

Balbert, il y a 10 ans

Ok parfait,

je te propose ceci =>

Dans ta boucle

<div data-id="<?= $id ?>" class="show"></div> <button data-id="<?= $id ?>">Afficher</button>

// dans ton js.

$(function () { $("button[data-id]").on('click', function (event) { event.preventDefault(); var id = $(this).data('id'); $('div[data-id=' +id+']').toggleClass('hide') }) })

// dans ton css

.hide{ display: none; }
khaledBoussoffara, il y a 10 ans

@Balbert dsl mais ça reste le meme probleme tu peux voir sur http://capimmo.co pour me comprendre

Balbert, il y a 10 ans

@khaledBoussoffara

J'ai rien compris :) peux tu reformuler ta phrase.

khaledBoussoffara, il y a 10 ans

j'utilise ce code pour afficher des div echo '<div class="hidden"' .'id="' .++$i .'"' .'>'; l'id est incrémental et j'associe à chaque div un bouton pour afficher et cacher la div courante par exemple div id ="1" avec son bouton afficher cacher et je veux que chaque bouton applique hide show seulement au div courant c'est à dire le premiere bouton affiche et cache seulement le div id ="1" le probleme que tous les boutons appliquent l'effet seulement au div 1

Genki, il y a 10 ans

Mets ton code comme il faut à l'aide du bouton

</>

Sinon, on voit pas ce que tu écris, le site interprétant les div etc.. comme tel si ils ne sont pas entourés des balises de code

khaledBoussoffara, il y a 10 ans
$sql = 'SELECT * FROM Total '; $req = $connexion->query($sql); $i=0; while($row = $req->fetch()) { echo'<button class="lien">Afficher détails</button>'; echo '<div class="sub_div"' .'id="' .++$i .'"' .'>'; echo'</div>';
khaledBoussoffara, il y a 10 ans

voilà donc j'auais à chaque fois ```
div id="1"

div id="2"

etc et je veux que chaque bouton du div toggle le div courant ( afficher cacher le div associé a chaque bouton )
khaledBoussoffara, il y a 10 ans

pour voir le live demo visiter www.capimmo.co dans les artciles à vendre j'ai mi Afficher détails pour afficher et cacher un div mais vous allez remarquer que tous les boutons appliquenemt l'effet seulement à la premiere div

Balbert, il y a 10 ans

C'est normal, fait ceci =>

dans ta vue

1 - Envele les identifiants [displayText, toggleText] respectivement sur le lien et la div.
2 - Commente carrement ton lien.
3 - Faire ceci ->
<?php $sql = 'SELECT * FROM Total '; $req = $connexion->query($sql); $i=0; while($row = $req->fetch()){ ?> <div class="sub_div"> ... <button data-id="<?= ++$id ?>">Afficher détails</button> <!-- Cette ligne ne sert à rien <a id="displayText" href="javascript:toggle();">Cacher</a> --> <div data-id="<?= ++$id ?>"> <h1><?= $row->title ?></h1> </div> <?php } ?>

// dans ton js

$(function () { $("button[data-id]").on('click', function (event) { event.preventDefault(); var id = $(this).data('id'); $('div[data-id=' +id+']').toggleClass('hide'); if ( $('div[data-id=' +id+']').hasClass('hide')) $(this).html("Afficher détails") else $(this).html("Cacher détails") }) })

// dans ton css :

.hide { display:none; }

Voila voila .

Attention, je vois des duplications d'identifiants essaye de les corrigés aussi

Balbert, il y a 10 ans

Autant pour moi lol c'est =>

$sql = 'SELECT * FROM Total '; $req = $connexion->query($sql); $id=0; while($row = $req->fetch()){ $id++; ?> <div class="sub_div"> ... <button data-id="<?= $id ?>">Afficher détails</button> <!-- Cette ligne ne sert à rien <a id="displayText" href="javascript:toggle();">Cacher</a> --> <div data-id="<?=$id ?>"> <h1><?= $row->title ?></h1> </div> <?php } ?>
khaledBoussoffara, il y a 10 ans

j'ai pas compris pourquoi l'effet s'applique au div qui précède

Balbert, il y a 10 ans

Verifie bien que le deuxième data-id vaut $id au lieu de ++$id