Problème logique fonction

Amstramgram
Javascript

Bonjour,
je suis entrain de faire un "portfolio" mais je suis face a un problème dans ma fonction et je ne comprend pas pourquoi.

J'ai une fonction qui permet d'afficher un projet avec un clic sur une minimature. Ca marche une fois, deux fois mais pas trois fois.

Code jQuery

$('.warp_project').hide();

    var countprojet = 0;
    $('.thumb').click(function(){

        var currentID = this.id;
        if(countprojet == 0){

            $('#warpslider #'+ currentID).fadeIn(500).addClass('active');
            lastID = currentID;
            countprojet = 1;
        }else{
            $('#warpslider #'+ lastID).fadeOut(300).removeClass('active');
            $('#warpslider #'+ currentID).fadeIn(500).addClass('active');
            lastID = currentID;
            countprojet = 0;
        }
    });

Le plus simple c'est de voir ça en direct Le portfolio.

Merci

5 réponses

fdusautoir
Réponse acceptée

Ce que tu souhaites faire rejoint exactement le code qui suit :

$('.warp_project').hide();
$('.thumb').on("click", function(){
     $('.warp_project').removeClass('active').fadeOut(300);
     $('#warpslider #'+ this.id).fadeIn(500).addClass('active');
});
hotline86

Bonjour,
A l'intérieur de ta section "warpslider", tu as deux sections qui portent le même ID "slider"

<section id="warp">
<section style="display: none;" id="warpslider">
<article style="display: none;" id="project1" class="warp_project">
<section id="slider">
<ul class="scontent">
<li>
<img src="media/project1.jpg">
</li>
<li>
<img src="media/project2.jpg">
</li>
<li>
<img src="media/project3.jpg">
</li>
</ul>
</section>
</article>
<article style="display: none;" id="project2" class="warp_project">
<section id="slider">
<ul class="scontent">
<li>
<img src="media/project1.jpg">
</li>
<li>
<img src="media/project2.jpg">
</li>
<li>
<img src="media/project3.jpg">
</li>
</ul>
</section>

C'est peut-être ce qui pose problème ...

Amstramgram
Auteur

Merci mais c'est pas ça le problème.

Pulpkin

Le problème que je vois, après je sais pas exactement si c'est celui dont tu parles, c'est le fait qu'à partir du troisième clic pour afficher un projet on se retrouve avec 1 projet ouvert et un morceau d'un second.

Pour corriger cela, il faut que tu caches le lastID également si countprojet == 0.

Parce que là concrètement, si on clique et réduis dans l'ordre projet 1, 2 puis 3, on a :
Premier clic => P1 affiché, countprojet = 1
Deuxième clic => P1 caché, P2 affiché, countprojet = 0
Troisième clic => P3 affiché, countprojet = 1 (et P2 n'est pas caché)

Amstramgram
Auteur

ok ok je vais tester tout ça .

Merci beaucoup