createElement Identifiant unique

Je construis une petite galerie en Html et j'ai quelques problèmes avec elle. J'ai une boucle for qui crée un img chaque fois qu'il itère. Le problème est qu'une fois que j'ai toutes les images produites et que j'essaie de transmettre une variable unique à mon autre fonction qui affiche l'image cliquée, il n'y a pas de valeurs uniques que je peux transmettre. Je ne vais probablement pas l'expliquer correctement, mais si vous l'exécutez, vous verrez ce que je veux dire. Toute aide pour comprendre comment je peux obtenir un identifiant unique pour chacune des vignettes serait grandement appréciée.createElement Identifiant unique

Ci-dessous le code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<script> 
function loadPictures(){ 
    var a = new Array(); 

    a[0] = '1-m'; 
    a[1] = '2-m'; 
    a[2] = '3-m'; 

    document.getElementById('inWin').innerHTML='<img src="images/1-m.png" width="620px" height="auto" />'; 

    var ci = document.getElementById('pics'); 
    var newImg, divIdName; 

    for(x=0; x<a.length; x++) 
    { 
     newImg = document.createElement('img'); 
     divIdName = 'portrait'+x; 
     newImg.setAttribute('id',divIdName); 
     newImg.setAttribute('src', 'images/' + a[x] + 'thumb.png'); 
     newImg.setAttribute('onclick','changeContent(x);'); // for FF 
     newImg.onclick = function() {changeContent(x);}; // for IE 
     ci.appendChild(newImg); 
    } 
} 
</script> 

<script> 
function changeContent(num){ 
    alert(num); 
    var a = new Array(); 
    x=num; 
    a[0] = '1-m'; 
    a[1] = '2-m'; 
    a[2] = '3-m'; 

    document.getElementById('inWin').innerHTML='<img src="images/'+ a[x] +'thumb.png" width="620px" height="auto" />'; 
} 
</script> 
</head> 
<body onload="loadPictures()"> 
<div id="inWin"> 
</div> 
<div id="pics"> 
</div> 
</body> 
</html>

Depuis que je suis un membre plus récent, je ne peux pas télécharger l'image, désolé.

Source

2012-12-03 Brandon McKinnon

Ajoutez un lien quand même. Quelqu'un vous aidera à l'insérer (aussi longtemps que c'est pertinent) :) –

Chacune des images possède déjà un identifiant unique, l'attribut ID. Vous pouvez travailler de différentes manières pour obtenir ce que vous voulez. voici une idée de ce à quoi cela ressemblerait:

<script> 

var a = [ '1-m', 
      '2-m', 
      '3m' 
     ]; 
function loadPictures(){ 

    document.getElementById('inWin').innerHTML='<img src="images/1-m.png" width="620px" height="auto" />'; 

    var ci = document.getElementById('pics'); 
    var newImg, divIdName; 

    for(x=0; x<a.length; x++) 
    { 
     newImg = document.createElement('img'); 
     divIdName = 'portrait'+x; 
     newImg.setAttribute('id',divIdName); 
     newImg.setAttribute('src', 'images/' + a[x] + 'thumb.png'); 
     if(document.addEventListener) 
      newImg.addEventListener('click', changeContent, false); 
     else if(document.attachEvent) 
      newImg.attachEvent('onclick', changeContent); 
     ci.appendChild(newImg); 
    } 

} 

function changeContent(){ 

    x = this.id.split('portrait')[1]; 

    document.getElementById('inWin').innerHTML='<img src="images/'+ a[x] +'.png" width="620px" height="auto" />'; 
} 
</script>

Source

2012-12-04 14:40:26 Joeri

Spot on! Cela fonctionne parfaitement, je n'aurais même pas pensé à l'essayer de cette façon. Simple, concis, et en prime, ça marche! Je vous remercie. –

createElement Identifiant unique

Répondre

Questions connexes