createElement唯一標識符

我正在Html中構建一個小畫廊，我遇到了一些麻煩。我有一個for循環，每次迭代時創建一個img。問題是，一旦我生成了所有的圖像，並嘗試將一個唯一的變量傳遞給我顯示點擊圖像的其他函數，那麼我不能傳遞唯一的值。createElement唯一標識符

我可能沒有解釋得很好，但如果你運行它，你會明白我的意思。任何幫助搞清楚如何我可以獲得每個縮略圖的唯一標識符將不勝感激。

以下是代碼。

<!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>

因爲我，我不能上傳圖片，對不起一個新成員。

來源

2012-12-03 Brandon McKinnon

無論如何添加一個鏈接。有人會幫你插入它（只要它是相關的）:) –

每個圖像都有一個唯一的標識符，即ID屬性。你可以用不同的方式處理這個問題，以獲得你想要的。這裏是一個什麼樣子的想法：

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

來源

2012-12-04 14:40:26 Joeri

現貨！這是完美的，我甚至不會想這樣試試。簡單，簡潔，作爲獎勵，它的作品！謝謝。 –

createElement唯一標識符

回答

相關問題