tuto portfolio

Par reydha, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code. j'essaie de mettre en pratique le tuto portfolio en grille, mais je suis bloqué au moment de l'affichage des details en js, il ne s'affiche absolument pas et je ne vois pas d'ou ça peut venir. j'ai pourtant tester la fonction click et celle ci se declenche bien quand je clique sur un projet..

Ce que je fais

jQuery(document).ready(function($){ var $active=false; $('.work').click(function(e){ e.preventDefault(); var $work = $(this); var $detail = $work.parent().nextAll('.row-detail:first'); var $work_detail= $('.work_detail', $work).clone(); $detail.append($work_detail.show()); }); });

Ce que je veux

je voudrais afficher le details du projet sur lequel je clique

Ce que j'obtiens

aucune action

21 réponses

reydha, il y a 9 ans

UP, je viens de trouver le probleme, celui ci vient du .clone()..
mais du coup je sais pas comment gerer sans le .clone()
Merci d'avance pour votre aide.

saibe, il y a 9 ans

hello,
tu es certain de ton selector ?
teste ceci :

var $work_detail= $('.work_detail').clone();
reydha, il y a 9 ans

je suis certain de mon selecteur, j'ai essayé ta methode et ca ne marche toujours pas, je pense que ca doit venir de .clone()

saibe, il y a 9 ans

tu pourrais envoyer ton html ?
et eventuellement le message d'erreur ?

reydha, il y a 9 ans
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/app.css"/> </head> <body> <div class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">Portfolio</a> <a href="#" class="navbar-brand">Anthony Joly</a> </div> </div> </div> <div class="container"> <?php for($j = 1;$j <= 3; $j++): ?> <div class="row"> <?php for($i=1; $i <= 4; $i++): ?> <article class="col-xs-3 work"> <img src="http://lorempicsum.com/futurama/220/153/<?= $i; ?>" alt=""/><br> <strong>Ma Réalisation</strong><br> <em>Wordpress</em> <div class="work_detail"> <hr/> <div class="row"> <div class="col-xs-8"> <img src="http://lorempicsum.com/futurama/460/250/1"/> <img src="http://lorempicsum.com/futurama/460/250/2"/> <img src="http://lorempicsum.com/futurama/460/250/3"/> </div> <div class="col-xs-4"> <h2>Mon Projet</h2> <p><em>wordpress</em></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> </div> <hr/> </div> </article> <?php endfor; ?> </div> <div class="row row-detail"></div> <?php endfor; ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/portfolio.js"></script> </body> </html>
reydha, il y a 9 ans

je n'ai justement aucun message d'erreur..

saibe, il y a 9 ans

;) ton row-detail ne fait pas parti de ton parent...
il ne peut pas le trouver.
remonte le dans ta div row, comme ça :

... </article> <?php endfor; ?> <div class="row row-detail"></div> </div> // avant cette fermeture de ton row <?php endfor; ?> ...

tu peux ainsi modifier légèrement tn js :

var $detail = $work.parent().find('.row-detail');
reydha, il y a 9 ans
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/app.css"/> </head> <body> <div class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">Portfolio</a> <a href="#" class="navbar-brand">Anthony Joly</a> </div> </div> </div> <div class="container"> <?php for($j = 1;$j <= 3; $j++): ?> <div class="row"> <?php for($i=1; $i <= 4; $i++): ?> <article class="col-xs-3 work"> <img src="http://lorempicsum.com/futurama/220/153/<?= $i; ?>" alt=""/><br> <strong>Ma Réalisation</strong><br> <em>Wordpress</em> <div class="work_detail"> <hr/> <div class="row"> <div class="col-xs-8"> <img src="http://lorempicsum.com/futurama/460/250/1"/> <img src="http://lorempicsum.com/futurama/460/250/2"/> <img src="http://lorempicsum.com/futurama/460/250/3"/> </div> <div class="col-xs-4"> <h2>Mon Projet</h2> <p><em>wordpress</em></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> </div> <hr/> </div> </article> <?php endfor; ?> </div> <div class="row row-detail"></div> <?php endfor; ?> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/portfolio.js"></script> </body> </html>

Comme ca du coup ?

saibe, il y a 9 ans

non avant.
juste après ton premier endfor

reydha, il y a 9 ans

j'ai maintenant une erreur dans ma console qui me dit "Failed to load resource: the server responded with a status of 404 (Not Found)"

saibe, il y a 9 ans

t sous laravel ?

reydha, il y a 9 ans

non du tout

saibe, il y a 9 ans

t'as modifié ton js ?
g fais un test, ça fonctionne chez moi....

reydha, il y a 9 ans

j'ai juste remplacer le nextAll par find comme tu m'as dis

jQuery(document).ready(function($){ var $active=false; $('.work').click(function(e){ e.preventDefault(); var $work = $(this); var $detail = $work.parent().find('.row-detail:first'); var $work_detail= $('.work_detail').clone(); $detail.append($work_detail.show()); }); });
saibe, il y a 9 ans

renvoie juste le html de ton container....

saibe, il y a 9 ans

enlève le first...

reydha, il y a 9 ans
<div class="container"> <?php for($j = 1;$j <= 3; $j++): ?> <div class="row"> <?php for($i=1; $i <= 4; $i++): ?> <article class="col-xs-3 work"> <img src="http://lorempicsum.com/futurama/220/153/<?= $i; ?>" alt=""/><br> <strong>Ma Réalisation</strong><br> <em>Wordpress</em> <div class="work_detail"> <hr/> <div class="row"> <div class="col-xs-8"> <img src="http://lorempicsum.com/futurama/460/250/1"/> <img src="http://lorempicsum.com/futurama/460/250/2"/> <img src="http://lorempicsum.com/futurama/460/250/3"/> </div> <div class="col-xs-4"> <h2>Mon Projet</h2> <p><em>wordpress</em></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> </div> <hr/> </div> </article> <?php endfor; ?> <div class="row row-detail"></div> </div> <?php endfor; ?> </div>
reydha, il y a 9 ans

meme si j'enleve le first rien ne se passe ..

saibe, il y a 9 ans

perso g modifié ton js car je pense q'un append va ajouter tes détails en couche.
g fais ça avec ton html ci-dessus :

$('.work').click(function(e){ e.preventDefault(); console.log($(this).parent().find('.row-detail')); // <- ça te sort un truc ? var $work = $(this); var $detail = $work.parent().find('.row-detail'); $detail.html($('.work_detail', $work).html()); });
reydha, il y a 9 ans

je te remercie enormement, ca venait bien du append donc .. Merci infiniment

saibe, il y a 9 ans

avec plaisir ;)