Souci avec une boucle et les images

Bonjour à tous,

Voila je suis en train de créer un petit jeu avec la carte de france. Quand on clic sur une région, je veut afficher 5 images en vignette.

Voila comment j ai fait.

for (var i = 1; i < 6; i++) {
        var li = document.createElement('li');
	var a = document.createElement('a');
	var img = document.createElement("IMG");
				
	a.setAttribute("class", "fancybox");
	a.setAttribute('rel', 'gallery1');
	a.setAttribute('id', i);
    	img.setAttribute("src",questions[index]["photo"+i]);
    			
	ul.appendChild(li)
    	li.appendChild(a)
        a.appendChild(img)
    	document.getElementById('container').appendChild(div);
}

jusque la tout va bien, mais quand je clic sur une autre région, les images de l autre région reste afficher.

Comment peut on lui dire que quand on clic ailleurs, enleve les images actuellement afficher et remplace les par les nouvelles ?

merci
Modifié par Biohazard401 (06 Nov 2015 - 22:31)

L'idée serait de donner une class ou un ID spécifique à ton <ul> qui regroupe les <li> que tu ajoutes et de le supprimer avant de recréer l'ensemble des vignettes:

// Code qui vient avant la création de tes vignettes...
var toDelete = document.querySelector(".une-class-assez-specifique");

toDelete.parentNode.removeChild(toDelete);
// ...

ul.className = "une-class-assez-specifique";

for (var i = 1; i < 6; i++) {

	var li  = document.createElement('li'),
		a   = document.createElement('a'),
		img = document.createElement("img");
		
	a.className = "fancybox";
	a.rel       = "gallery1";
	a.id        = i;
	img.src     = questions[index]["photo"+i];
			
	a.appendChild(img)
	li.appendChild(a)
	ul.appendChild(li)

	document.getElementById('container').appendChild(div);

}

Hello,

Merci de ton aide, j'ai compris ce que tu voulais dire. Par contre avec ta methode, le ul est aussi supprimer. Donc forcement, les autres vignette de s affiche pas.

Voici comment j'ai fait mon html

<div id="tooltip_img">
   <ul id="gallery" class="toDelete">
            
   </ul>
</div>

et mon js

$('.map area').click(function(){
   index = $(this).index();
   var i = 0;
   var dir =  questions[index].name;
   var div = document.getElementById('tooltip_img');
   var ul = document.getElementById('gallery');

   var toDelete = document.querySelector(".toDelete");
   toDelete.parentNode.removeChild(toDelete);
   ul.className = "toDelete";

   for (var i = 1; i < 6; i++) {

      var li  = document.createElement('li'),
      a   = document.createElement('a'),
      img = document.createElement("img");
				
      a.className = "fancybox";
      a.rel       = "gallery1";
      a.id        = i;
      img.src     = questions[index]["photo"+i];
					
      a.appendChild(img)
      li.appendChild(a)
      ul.appendChild(li)

      document.getElementById('container').appendChild(div);
   }
});

Désolu pour le double post

Après quelques réflexions, je me suis dit que le mieux serais de faire une condition du genre "si il y a des li déja existant, supprime les et refait la boucle pour créer les vignettes".

Voila ce que cela donne pour ceux qui sont intérésser

$('.map area').click(function(){
        index = $(this).index();
    var i = 0;
    var dir =  questions[index].name;
 
    var div = document.getElementById('tooltip_img');
    var ul = document.getElementById('gallery');
 
        // Si il ya déja des li deja existant
    if ($('ul#gallery li').length != 0){
            var elem = document.querySelector('#gallery');
                //Supprime tout les enfant du ul
            elem.parentNode.removeChild(elem);
            var ul  = document.createElement('ul');
            ul.setAttribute("id", "gallery");
            div.appendChild(ul);
 
                for (var i = 1; i < 6; i++) {
                    var li  = document.createElement('li'),
                a   = document.createElement('a'),
                img = document.createElement("img");
                         
                a.className = "fancybox";
                a.rel       = "gallery1";
                a.id        = i;
                img.src     = questions[index]["photo"+i];
                     
                a.appendChild(img)
                li.appendChild(a)
                ul.appendChild(li)
 
                document.getElementById('container').appendChild(div);
                }
        }
                //Si il n'y a pas de li existant (donc seulement au premier clic)
        else{
            for (var i = 1; i < 6; i++) {
 
                        var li  = document.createElement('li'),
                    a   = document.createElement('a'),
                    img = document.createElement("img");
 
                li.className = "lol";
                     
                a.className = "fancybox";
                a.rel       = "gallery1";
                a.id        = i;
                img.src     = questions[index]["photo"+i];
                         
                a.appendChild(img)
                li.appendChild(a)
                ul.appendChild(li)
 
                document.getElementById('container').appendChild(div);
            }
        }  
    });

Merci, Sujet Résolu

Désolu pour le double post

Après quelques réflexions, je me suis dit que le mieux serais de faire une condition du genre "si il y a des li déja existant, supprime les et refait la boucle pour créer les vignettes".

Voila ce que cela donne pour ceux qui sont intérésser

$('.map area').click(function(){
        index = $(this).index();
    var i = 0;
    var dir =  questions[index].name;
 
    var div = document.getElementById('tooltip_img');
    var ul = document.getElementById('gallery');
 
        // Si il ya déja des li deja existant
    if ($('ul#gallery li').length != 0){
            var elem = document.querySelector('#gallery');
                //Supprime tout les enfant du ul
            elem.parentNode.removeChild(elem);
            var ul  = document.createElement('ul');
            ul.setAttribute("id", "gallery");
            div.appendChild(ul);
 
                for (var i = 1; i < 6; i++) {
                    var li  = document.createElement('li'),
                a   = document.createElement('a'),
                img = document.createElement("img");
                         
                a.className = "fancybox";
                a.rel       = "gallery1";
                a.id        = i;
                img.src     = questions[index]["photo"+i];
                     
                a.appendChild(img)
                li.appendChild(a)
                ul.appendChild(li)
 
                document.getElementById('container').appendChild(div);
                }
        }
                //Si il n'y a pas de li existant (donc seulement au premier clic)
        else{
            for (var i = 1; i < 6; i++) {
 
                        var li  = document.createElement('li'),
                    a   = document.createElement('a'),
                    img = document.createElement("img");
 
                li.className = "lol";
                     
                a.className = "fancybox";
                a.rel       = "gallery1";
                a.id        = i;
                img.src     = questions[index]["photo"+i];
                         
                a.appendChild(img)
                li.appendChild(a)
                ul.appendChild(li)
 
                document.getElementById('container').appendChild(div);
            }
        }  
    });

Merci, Sujet Résolu

Désolu pour le double post

Après quelques réflexions, je me suis dit que le mieux serais de faire une condition du genre "si il y a des li déja existant, supprime les et refait la boucle pour créer les vignettes".

Voila ce que cela donne pour ceux qui sont intérésser

$('.map area').click(function(){
        index = $(this).index();
    var i = 0;
    var dir =  questions[index].name;
 
    var div = document.getElementById('tooltip_img');
    var ul = document.getElementById('gallery');
 
        // Si il ya déja des li deja existant
    if ($('ul#gallery li').length != 0){
            var elem = document.querySelector('#gallery');
                //Supprime tout les enfant du ul
            elem.parentNode.removeChild(elem);
            var ul  = document.createElement('ul');
            ul.setAttribute("id", "gallery");
            div.appendChild(ul);
 
                for (var i = 1; i < 6; i++) {
                    var li  = document.createElement('li'),
                a   = document.createElement('a'),
                img = document.createElement("img");
                         
                a.className = "fancybox";
                a.rel       = "gallery1";
                a.id        = i;
                img.src     = questions[index]["photo"+i];
                     
                a.appendChild(img)
                li.appendChild(a)
                ul.appendChild(li)
 
                document.getElementById('container').appendChild(div);
                }
        }
                //Si il n'y a pas de li existant (donc seulement au premier clic)
        else{
            for (var i = 1; i < 6; i++) {
 
                        var li  = document.createElement('li'),
                    a   = document.createElement('a'),
                    img = document.createElement("img");
 
                li.className = "lol";
                     
                a.className = "fancybox";
                a.rel       = "gallery1";
                a.id        = i;
                img.src     = questions[index]["photo"+i];
                         
                a.appendChild(img)
                li.appendChild(a)
                ul.appendChild(li)
 
                document.getElementById('container').appendChild(div);
            }
        }  
    });

Merci, Sujet Résolu

Ou tu pouvais juste ajouter ces lignes:

ul.parentNode.removeChild(ul);
ul = document.createElement("ul")
div.appendChild(ul);