Problème logique fonction

Par Amstramgram, il y a 13 ans

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

hotline86, il y a 13 ans

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, il y a 13 ans

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

fdusautoir, il y a 13 ans

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');
});
Pulpkin, il y a 13 ans

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, il y a 13 ans

ok ok je vais tester tout ça .

Merci beaucoup