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 :

Tableau et boucle


Sujet :

jQuery

  1. #1
    Futur Membre du Club
    Tableau et boucle
    Bonjour,

    J'ai un petit souci avec mon code.

    Voici l'idée toute simple !

    j'ai une carte, avec des zones définies en< area>.
    Lorsque l'on clic sur une zone, s'affiche une fiche par personne liée à cette zone.
    Dans l'ensemble, même si je ne doute pas un instant qu'il doit y avoir une meilleure façon de procéder, cela fonctionne pas mal.

    S'il n'y a qu'un seul résultat non négatif au test de présence dans le tableau, j'ai bien la fiche correspondante qui s'affiche.

    Mais, s'il y a plusieurs résultats non négatifs !
    Il y a bien une fiche par personne (deux ou trois) mais toutes compléter avec les donnés du dernier résultat non négatif.
    Et je voudrais une fiche par personne ;o)

    Voici le code:

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     
    var pro = [
        ['Dupont','Raphaël','1234 56 78','info@dupont.com','www.dupont.com','img/pro/photo-1.jpg',0,1,2,5],
        ['Deschamp','Frédéric','1234 56 78','info@deschamp.com','www.deschamp.com','img/pro/photo-2.jpg',1,2,5],
        ['Lagrange','Michel','1234 56 78','info@lagrange.com','www.lagrange','img/pro/photo-3.jpg',3,4,5],
    ];
    var services = [
        ['oui','oui','oui','oui','oui'],
        ['non','non','non','non','non'],
        ['oui','non','oui','non','oui'],
    ];
    $('.map area').click(function(){
        $('.box-tab').html('');
        var index = $(this).index();
        for (var i=0, c=pro.length; i<c; i++) {     
            if( $.inArray(index , pro[i]) != -1 ){
                $('.box-tab').append('<div class="fiches"><div class="fi-pers"><div class="fi-photo"><img class="portrait" src=""></img></div><div class="fi-info"></div></div><div class="fi-serv"><table class="fi-tab"></table></div></div>');
                $('.portrait').attr('src',pro[i][5]);
                $('.fi-info').html('<ul><li>'+pro[i][0]+'</li><li>'+pro[i][1]+'</li><li>'+pro[i][2]+'</li><li>'+pro[i][3]+'</li><li>'+pro[i][4]+'</li></ul>');
                $('.fi-tab').html('<tr><th>Comportementalisme</th><th>Education</th><th>Ecole des chiots</th><th>Pension éducation</th><th>Pension simple</th></tr>');
                $('.fi-tab').append('<tr><td>'+services[i][0]+'</td><td>'+services[i][1]+'</td><td>'+services[i][2]+'</td><td>'+services[i][3]+'</td><td>'+services[i][4]+'</td></tr>');
            };
        };    
    });

    Un grand merci

  2. #2
    Rédacteur/Modérateur

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
     $('.portrait').attr('src',pro[i][5]);


    quelque soit le i TOUS les éléments de class .portrait sont affectés
    Il est donc normal que tu ne récupères que le dernier de la boucle car c'est le dernier que tu attribues ...


    Il serait plus intéressant sans doute de passer par une structure html existante sur la page mais non visible et que tu clones dans la boucle et venant modifier les éléments enfants de l'élément cloné avec les paramètres du i puis de l'appender dans la page.

    Autre possibilité basée sur ton code

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    $('.box-tab:eq(0)').append('<div class=""fiches"


    tu récupères le dernier element avec la class fiches
    et tu en modifies le contenu
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $dernierElementAjoute = $('.box-tab:eq(0)').find('.fiches').last();
     
    $dernierElementAjoute.find('.portrait').attr('src',pro[i][5]);
    $dernierElementAjoute.find('.fi-info').html('<ul><li>'+pro[i][0]+'</li><li>'+pro[i][1]+'</li><li>'+pro[i][2]+'</li><li>'+pro[i][3]+'</li><li>'+pro[i][4]+'</li></ul>');
    $dernierElementAjoute.find('.fi-tab').html('<tr><th>Comportementalisme</th><th>Education</th><th>Ecole des chiots</th><th>Pension éducation</th><th>Pension simple</th></tr>');
    $dernierElementAjoute.find('.fi-tab').append('<tr><td>'+servi....

    ainsi les modifications ne s'appliqueront QUE SUR LE DERNIER élément inséré.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Futur Membre du Club
    Bonjour,

    Tout d'abord, un grand merci :o)
    J'ai utiliser ton option d'un élément html en display none, puis cloné avec les paramètres du i.

    J'ai rajouter
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    $('.box-tab').html('');

    pour faire un reset à chaques clic pour que les "vielles' fiches disparaissent !

    Donc cela donne:
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <div id="fiches-vide">
      <div class="fiches">
        <div class="fi-pers">
          <div class="fi-photo">
            <img class="portrait" src=""></img>
          </div>
          <div class="fi-info">
          </div>
        </div>
        <div class="fi-serv">
          <table class="fi-tab">
            <tr>
              <th>Comportementalisme</th>
              <th>Education</th>
              <th>Ecole des chiots</th>
              <th>Pension éducation</th>
              <th>Pension simple</th>
            </tr>
            <tr class="fi-tab-pers"></tr>
          </table>
        </div>
      </div>
    </div>
     
    <div class="box-tab">
      <h3>regions et services</h3>
    </div><!-- box-tab -->


    et Jquery

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
      $('.map area').click(function(){
        $('.box-tab').html('');
        var index = $(this).index();
        for (var i=0, c=pro.length; i<c; i++) {     
          if( $.inArray(index , pro[i]) != -1 ){
            $('#fiches-vide .fiches').clone().appendTo(".box-tab");
            $newFichese = $('.box-tab').find('.fiches').last();
            $newFichese.find('.portrait').attr('src',pro[i][5]);
            $newFichese.find('.fi-info').html('<ul><li>'+pro[i][0]+'</li><li>'+pro[i][1]+'</li><li>'+pro[i][2]+'</li><li>'+pro[i][3]+'</li><li>'+pro[i][4]+'</li></ul>');
            $newFichese.find('.fi-tab-pers').html('<td>'+services[i][0]+'</td><td>'+services[i][1]+'</td><td>'+services[i][2]+'</td><td>'+services[i][3]+'</td><td>'+services[i][4]+'</td>');
          };
        };    
      });


    Vraiment encore un grand merci SpaceFrog

    Il me reste un petit souci, lors du clic le navigateur fait comme un refresh de la page.
    Comme il retourne au niveau du menu, il faut scroller la page à nouveau pour voir le tableau !
    Il y aurait une solution ?

    Et sans vouloir abuser, j'ai une autre question.
    Je voudrais animer certains éléments (div, titre ou p) lors de leur premier chargement (affichage sur la page), lorsque l'utilisateur scroll à leurs hauteurs.
    Quelle méthode je pourrais utiliser ?

  4. #4
    Rédacteur/Modérateur

    pour ta première question : avec un animate du scrollTop

    pour la seconde ça va dépendre du type d'animation que tu veux ...
    je te conseillerais alors d'ouvrir un nouveau post
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Futur Membre du Club
    oki et merci pour tout