tuto portfolio en grille

reydha
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code. j'ai suivi le tuto portfolio en grille, j'ai déjà eu un soucis avec le code, on m'a conseillé de faire autrement que le tuto mais je suis maintenant a nouveau bloqué sur le code..

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire


jQuery(document).ready(function($){
    var $active=false;

$('.work').click(function(e){
        e.preventDefault();
        var $work = $(this);
        var $detail = $work.parent().find('.row-detail');

        if($active){
            $active.remove();
        }
        $detail.html($('.work_detail', $work).html());
        $active = $detail;

    });

});```

### Ce que je veux

le soucis quand je clique sur une des images, il affiche bien les details du projet, quand je reclique dessus, il s'enleve bien.. sauf que je ne peux plus cliquer sur autre chose apres cette manipulation...

13 réponses

saibe
Réponse acceptée

;)

jQuery(document).ready(function($){

$('.work').click(function(e){ 
        e.preventDefault();
        $(this).toggleClass('active');
        var $detail = $(this).parent().find('.row-detail');
        if($(this).hasClass('active')){
            $detail.html($('.work_detail', $(this)).html());
        } else {
            $detail.html('');
        }

    });

});
saibe

:) tu repostes ?
ton code ne va pas, ta variable $active ne peut être remove, ce n'est pas du dom....
, renvoie ton html, juste de la section concernée

reydha
Auteur

oui je reposte , il faut bien que j'apprennes de mes erreurs ;)
du coup ca s'ouvre bien et ca se ferme bien, mais que sur une seule image :/ 

   <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<?= $j. '-'.$i ?> </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 <?= $j. '-'.$i ?></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>
saibe

bon, g lu de travers mais je ne vois aucun élément "active"...
tu veux faire quoi exactement ?

reydha
Auteur

L´element active se delare au debut du js il est egale a false

reydha
Auteur

Je voudrais que quand je reclique sur l´image, Celle ci se referme, Ca marche mais que sur une seule image

saibe

:) oui ça, g vu, mais ton js veut rien dire
je commente :

jQuery(document).ready(function($){
    var $active=false; // là tu dis qu'une variable $active doit être false par default ; c un bool

$('.work').click(function(e){ // ici tu définis une fonction au clique sur ts les ".work"
        e.preventDefault();
        var $work = $(this);
        var $detail = $work.parent().find('.row-detail');

        if($active){ // ici tu demandes si $active est true (pour moi ya un pb de scope mais passons... $active sera à false c obligé... bref ça sert à rien
            $active.remove(); // action impossible, d'une part à cause de la condition précédente et d'autre part tu veux remove un bool : impossible
        }
        $detail.html($('.work_detail', $work).html());
        $active = $detail; // oui tu transforme ton bool en $element jquery et alors ?
        // on arrive à la fin de ton clique et $active n'a servi à rien
    });

});
reydha
Auteur

Justement mon active prend u'e valeur quan dje clique sur l´image, et la condition de verification sert a voir il est rempli pour pouvoir le masquer

saibe

hummm, ok ;) autant pour moi, c vrai ça peut fonctionner, mais c po terrible... l'utilisation de variables globales n'est a utilser qu'avec parcimonie....
utilises plutôt un toogle de class et tu vérifies le hasclass...

reydha
Auteur

en js, C'est pas mon fort ...
Mais du coup t´as pas une solution a mon soucis ? les details et s´affiche mais ca fonctionne que sur un seul element et pas sur tous ..

saibe

je pense que l'idée est là.... non ?

reydha
Auteur

t'es un boss mec ! :D

saibe

avec plaiz ;)