bonjour,

je débute en jQuery et j'ai écris ce script que je voudrais alléger en faisant une boucle : 

        $("#inline-popups li a").eq(0).click(function(){
            $(".white-popup").eq(0)
                .css({ display: "none" })
                .fadeIn(500);
        }); 
        $("#inline-popups li a").eq(1).click(function(){
            $(".white-popup").eq(1)
                .css({ display: "none" })
                .fadeIn(500);
        }); 
        $("#inline-popups li a").eq(2).click(function(){
            $(".white-popup").eq(2)
                .css({ display: "none" })
                .fadeIn(500);
        }); 
        $("#inline-popups li a").eq(3).click(function(){
            $(".white-popup").eq(3)
                .css({ display: "none" })
                .fadeIn(500);
        });
        $("#inline-popups li a").eq(4).click(function(){
            $(".white-popup").eq(4)
                .css({ display: "none" })
                .fadeIn(500);
        }); 
        $("#inline-popups li a").eq(5).click(function(){
            $(".white-popup").eq(5)
                .css({ display: "none" })
                .fadeIn(500);
        }); 
        $("#inline-popups li a").eq(6).click(function(){
            $(".white-popup").eq(6)
                .css({ display: "none" })
                .fadeIn(500);
        }); 
        $("#inline-popups li a").eq(7).click(function(){
            $(".white-popup").eq(7)
                .css({ display: "none" })
                .fadeIn(500);
        }); 
        $("#inline-popups li a").eq(8).click(function(){
            $(".white-popup").eq(8)
                .css({ display: "none" })
                .fadeIn(500);
        }); 
        $("#inline-popups li a").eq(9).click(function(){
            $(".white-popup").eq(9)
                .css({ display: "none" })
                .fadeIn(500);
        });

mais cette boucle somme toute ordinaire, ne fonctionne pas :

    var maxPopup = $("#inline-popups li a").length;
    for (var i = 0; i <= maxPopup; i++){
        $("#inline-popups li a").eq(i).click(function(){
            $(".white-popup").eq(i)
                .css({ display: "none" })
                .fadeIn(500);
        });     
    }

je ne vois pas ou est l'erreur. quelqu'un pour m'aider?

var maxPopup = $("#inline-popups li a");

for (let i = 0; i < maxPopup.length; i++) {
    maxPopup[i].click(() => {
        $(".white-popup")[i]
            .css({display: "none"})
            .fadeIn(500);
    });
}

merci Zirpoo pour ta réponse

j'ai eu les bases de javascript en formation, mais j'avoue c'est une catastrophe, je reprends tout ici, le cours est moins bâclé...

de plus, je modifie par cette boucle un plugin jQuery, j'ai pensé qu'il fallait parler le même langage

ça fonctionne mieux en effet, mais au chargement de la page la dernière popup s'ouvre alors qu'il n'y pas pas de click demandé, et je n'ai pas l'effet fadeIn comme je l'avais sans la boucle

petite question : pourquoi utiliser let plutôt que var?

-
Edité par Seds 28 décembre 2017 à 19:08:36

mmmmh, je ne sais pas pourquoi la dernière popup s'ouvre, mais je sais pourquoi le fadeIn ne marche pas.

Le temps que le fadeIn s'effectue la propriété display est déjà à none, ce qui veux dire que white-popup n'est plus visible lorsque jQuery fait l'animation.

J'utilise let plutôt que var pour ne pas avoir de problème de variables en dehors de ma boucle. Si je mettais var i = 0; au lieu de let, la variable i serais disponible en dehors de la boucle, sauf que i n'est utilisé qu'à l'intérieur de celle-ci.

la porté des variables "let" ne sont que dans le bloc ou elle est. Dans ce cas ci, la boucle for.

la porté des variables "var" sont global et peu être consulté en dehors de son contexte.

renseigne-toi sur la porté des variables let et var. c'est assez compliquer à expliquer à un débutant

-
Edité par Zirpoo 28 décembre 2017 à 20:01:09

j'ai mis un .css({display :"none"}) parce que si on clique sur une image, on ouvre avec le fadeIn, puis si on reclique sur une autre le fadeIn est déjà actif sur la série donc pas de fadeIn si on reclicque sur un lien, donc j'efface la div et on recommence. et ça marche sans boucle

en revanche j'ai du mal m'exprimer: ce n'est pas que la dernière popup ne s'affiche pas, c'est qu'elle est déjà ouverte au chargement de la page, sans qu'on ait cliqué sur son lien

-
Edité par Seds 28 décembre 2017 à 20:05:33

$("#inline-popups li a").click(() => {
    $(".white-popup") // Essaie de trouver un autre moyen de ciblé le white-popup par rapport ai lien cliqué
        .css({display: "none"})
        .fadeIn(500);
});

-
Edité par Zirpoo 28 décembre 2017 à 20:20:51

c'est parfait merdi Zirpoo!!

j'ai ajouté un id devant le .white-popup et le tour est joué

encore merci

-------------

dis j'essaie d'appliquer ta méthode sur une autre boucle mais rien ne se passe.. en même temps je suis pas sure d'avoir le droit de faire ce que je fais...

à l'origine le script ressemblait à ça:

    $(".geek img").eq(0).mouseover(function(){
        $(".geek img").eq(0).attr('src','img/geek_red/geek-1.png');
    });
    $(".geek img").eq(0).mouseout(function(){
        $(".geek img").eq(0).attr('src','img/geek/geek-1.png');
    });
    
    $(".geek img").eq(1).mouseover(function(){
        $(".geek img").eq(1).attr('src','img/geek_red/geek-2.png');
    });
    $(".geek img").eq(1).mouseout(function(){
        $(".geek img").eq(1).attr('src','img/geek/geek-2.png');
    });
    
    $(".geek img").eq(2).mouseover(function(){
        $(".geek img").eq(2).attr('src','img/geek_red/geek-3.png');
    });
    $(".geek img").eq(2).mouseout(function(){
        $(".geek img").eq(2).attr('src','img/geek/geek-3.png');
    });

etc.. mais qui fonctionne.

j'ai donc modifié les noms et les sources des images pour pouvoir les insérer dans une boucle (au lieu de commencer par geek-1.png, les images commencent par geek-0.png). ce qui donnerait cela:

    var geeks = $(".geek img");   // toutes les images

    for (let i = 0; i < geeks.length; i++) {
        $(geeks).mouseover(() => {   // au survol change de source
            $(this).attr('src','img/geek-animation/geek_red/geek-' + i + '.png');
        });
        $(geeks).mouseout(() => {   // revient à la source d'origine
            $(this).attr('src','img/geek-animation/geek_white/geek-' + i + '.png');
        });
    }

ne fonctionne pas, pas de changement d'image.

suis allée jusque là aussi, même résultat :

    for (let i = 0; i < geeks.length; i++) {
        $(geeks)[i].mouseover(() => {
            $(this).attr('src','img/geek-animation/geek_red/geek-' + i + '.png');
        });
        $(geeks)[i].mouseout(() => {
            $(this).attr('src','img/geek-animation/geek_white/geek-' + i + '.png');
        });
    }

voici le html: 

       <div class="geek">
        <img src="img/geek-animation/geek_white/geek-0.png" alt="" class="geek0">
        <img src="img/geek-animation/geek_white/geek-1.png" alt="" class="geek1">
        <img src="img/geek-animation/geek_white/geek-2.png" alt="" class="geek2">
        <img src="img/geek-animation/geek_white/geek-3.png" alt="" class="geek3">
        <img src="img/geek-animation/geek_white/geek-4.png" alt="" class="geek4">
        <img src="img/geek-animation/geek_white/geek-5.png" alt="" class="geek5">
        <img src="img/geek-animation/geek_white/geek-6.png" alt="" class="geek6">
       </div>

simple.

une idée?

Je ne suis pas habitué de faire du jQuery vu que je ne code qu'en javascript pure ces temps-ci.

En gros, avec jQuery, tu peux juste cibler sans faire une boucle.

Mon exemple en haut avec la boucle for est une mauvaise interprétation de jQuery.

    $(".geek img").mouseover(() => {   // au survol change de source
        $(this).attr('src','img/geek-animation/geek_red/geek-' + i + '.png');
    });
    $(".geek img").mouseout(() => {   // revient à la source d'origine
        $(this).attr('src','img/geek-animation/geek_white/geek-' + i + '.png');
    });

ok je vais "tenter" une boucle en JS..

3, 4, ça fonctionne pas..

    var geeks = document.querySelectorAll(".geek img");

    for (var i = 0; i < geeks.length; i++){
      geeks[i].addEventListener('mouseover', function(){
        var source = this.setAttribute('src', 'img/geek-animation/geek_red/geek-' + i + '.png');
        document.querySelectorAll('.geek img')[i] = source;
      });
      geeks[i].addEventListener('mouseout', function(){
        var source = this.setAttribute('src', 'img/geek-animation/geek_white/geek-' + i + '.png');
        document.querySelectorAll('.geek img')[i] = source;
      });
    }

cherche à afficher geek-7.png qui n'existe pas.
normal les images vont de geek-0.png à geek-6.png

pourtant la source fonctionne quand je mets une image en dur dans la variable source càd. geek-1.png par ex, et toutes les images sont les mêmes du coup mais c'est pas le but.

le pb c'est : geek-' + i + '.png, mais où i ne prend pas la valeur du i document.querySelectorAll('.geek img')[i] mais sort de la boucle..

ça me dépasse!

-
Edité par Seds 29 décembre 2017 à 23:03:39

bonsoir, je me permets de réveiller un peu mon post car j'ai cafouillé dans sa résolution ou pas..

bah non toujours pas de soluce pour ce second soucis

la solution était toute bête, let i à la place de var i et hop!

je pensais que let était réservés au jquery..

bref pb résolu

enfin