IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Boucler sur des éléments


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Avril 2014
    Messages
    50
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Avril 2014
    Messages : 50
    Par défaut Boucler sur des éléments
    Bonjour,
    J'ai une série de boutons en JQuery qui se présentent sous cette forme et je voudrais mettre une boucle à la place. Comment faire ? Merci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
        $('#1').click(function() {
    			  $('#gallerie').css("top","0px");
              });
        $('#2').click(function() {
    			  $('#gallerie').css("top","-310px");
              });
        $('#3').click(function() {
    			  $('#gallerie').css("top","-620px");
              });
        $('#4').click(function() {
    			  $('#gallerie').css("top","-930px");
              });

  2. #2
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Avril 2014
    Messages
    50
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Avril 2014
    Messages : 50
    Par défaut
    j'ai essayé avec cette syntaxe mais ça ne donne aucun résultat
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    for (var i=1; i<20; i++) {
        //console.log(i);
     
    	$('#'+i).click(function() {
    			  $('#gallerie').css("top",-310*(i-1)+'px');
              });
     
     
    }

  3. #3
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 518
    Par défaut
    pour que la propriété top puisse être modifiée, il faut que la "gallerie" ait une position absolute en css, Ou utiliser marginTop, au lieu de top.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    $('#1').click(function() {
    			  $('#gallerie').css("marginTop","0px");
              });
        $('#2').click(function() {
    			  $('#gallerie').css("marginTop","-310px");
              });
        $('#3').click(function() {
    			  $('#gallerie').css("marginTop","-620px");
              });
        $('#4').click(function() {
    			  $('#gallerie').css("marginTop","-930px");
              });

  4. #4
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Avril 2014
    Messages
    50
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Avril 2014
    Messages : 50
    Par défaut
    ok, donc au niveau du code ça donne ça ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    for (var i=1; i<20; i++) {
     
    	$('#'+i).click(function() {
    			  $('#gallerie').css("marginTop",-310*(i-1)+'px');
                              alert("bouton cliqué"+i);
              });
     
     
    }
    il doit y avoir une erreur car alert("bouton cliqué"+i); me renvoie toujours le nombre 20 et non le bon numéro du bouton sur lequel j'ai cliqué !

  5. #5
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 518
    Par défaut
    pour ne pas compliquer les choses, tu peux utiliser un selecteur jQuery qui factorise les 4 éléments.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    $("#1,#2,#3,#4").click(function(){
    $('#gallerie').css("marginTop",-310*($(this).index())+'px');
         alert("id du bouton cliqué :"
         +$(this).attr('id')
         +', top :'+(-310*$(this).index())
         +', i :'+$(this).index());
     
    });

  6. #6
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Avril 2014
    Messages
    50
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Avril 2014
    Messages : 50
    Par défaut
    merci, ça marche nickel ! par contre il se trouve que si je mets les liens dans une <table> le script jQuery ne fonctionne plus. C'est un problème de ciblage ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XSLT 1.0] XSLT - Boucler sur des éléments uniques
    Par the_unforgiven dans le forum XSL/XSLT/XPATH
    Réponses: 1
    Dernier message: 03/04/2018, 20h10
  2. boucler sur des éléments de formulaire
    Par cedrick21 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 12/02/2010, 11h09
  3. Boucler sur des champs texte
    Par syl2095 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 25/11/2004, 16h15
  4. boucler sur des checkboxes
    Par El Saigneur dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 09/10/2004, 08h27
  5. [VB6] Comment boucler sur des controls d'un form ?
    Par lankviller dans le forum VB 6 et antérieur
    Réponses: 5
    Dernier message: 27/01/2003, 16h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo