2017-08-01 85 views
0

有沒有人能夠引導我和許多其他NOVICE LEARNERS誰來這裏尋求一個解決方案,如這個問題的評價意見?使用var for img創建的ID標籤Jscript html

我已經設法爲src和圖像創建一個數組,但是我找不到一種方法將ID數組附加到IMG的HTML標識中。即img id =「foo」src =「bar」等。我希望有一個ID爲n的數組。

我要開始編碼乾燥,我一直在看許多西元和教程,並已成功地走到這一步......

<html> 
<body> 

<var x=0; x<10; x++1> 
<img id="0" src="cicons1.png" style="position:absolute;"> 



<script> 

var i=0 

function setup() { 
document.getElementById([i]).style = ("position:absolute; left:"+[i*100+100]+"px;") 
document.getElementById([i]).src="Cicons"+[i]+".png"; 

console.log([i]) 
} 
for (var i=0; i<10; i=i+1) { setup(); 
} 
</script> 

</body> 
</html> 

但我希望有對ID的數組也讓我不必一遍又一遍地重複圖像標籤 。因爲我正在處理60多個圖標和圖像以及文字說明。所以它會是一個理想的乾燥方法,我已經失敗非常糟糕,我自己提供一個解決方案,所以現在我必須求助於專家..

所以我提前感謝您,如果您有解決方案..

https://ibb.co/ifGcKk

回答

0

請注意真的有很多方法可以做到這樣的任務,這裏僅僅是一個例子:

<html> 
 
<body> 
 
<div id="iconContainer"></div> 
 
<div id="icoSelected" style="position: absolute; top: 120px;">Selected: -none-</div> 
 
<script> 
 
    function showSelected() { 
 
    document.getElementById('icoSelected').innerHTML = this.src; 
 
    } 
 
    function setup(cnt, id) { 
 
    var imgEl = document.createElement('img'); 
 
    var icoName = "Cicons"+id+".png"; 
 
    imgEl.id = 'icon-'+id; 
 
    imgEl.style.position = 'absolute'; 
 
    imgEl.style.left = (id-1)*100+20+'px'; 
 
    imgEl.style.width = '80px'; 
 
    imgEl.style.height = '80px'; 
 
    imgEl.src = icoName; 
 
    imgEl.addEventListener('click', showSelected); 
 
    cnt.appendChild(imgEl); 
 
    } 
 
    var cont = document.getElementById('iconContainer'); 
 
    for (var i=0, nIcons=10; i<nIcons; i++) { 
 
    setup(cont, i+1); 
 
    } 
 
</script> 
 
</body> 
 
</html>