Tableau et boucle

Version imprimable

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:

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

Code:

$('.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:

$('.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:

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é.

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:

$('.box-tab').html('');

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

Donc cela donne:

Code:

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:

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 :applo:

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 ?

06/03/2020, 11h33
SpaceFrog

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
06/03/2020, 12h11
Sennsi

oki et merci pour tout :)