使用javascript創建具有不同圖像的細節元素

我想創建一個循環，將創建一個圖像源的細節元素，每個循環增加1個數字。我可以讓循環通過，創建正確數量的圖像，但我認爲他們將逐行代碼作爲逐字符而不是應用循環迭代編號。使用javascript創建具有不同圖像的細節元素

嘗試picture.innerHTML = "<img src='asset/' + i + '.jpeg'>"其中我是當前循環迭代不起作用。任何關於替代品的建議這也是我的第一個問題，所以我很抱歉，如果我有點不清楚。

2016-10-10 MrKyle

你能發佈你嘗試過的foreach循環嗎？ – James

我今晚會晚些時候，不幸的是我只是讓這個帳戶在工作，並且該文件在我的桌面上。 – MrKyle

我正在使用do while循環，是否有每個循環可用於運行文件中的每個圖像？這是爲了讓我和朋友玩的棋盤遊戲更容易管理的應用程序。 – MrKyle

獲取陣列中的所有div，然後循環，雖然他們不斷變化的，像這樣的html：

var generatePhotos = function() { 
 
var photos = document.getElementsByClassName('photo'); 
 

 
for (var i = 1; i < photos.length; i++){ 
 
    
 
photos[i].innerHTML = "<img src='http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/" + i +".jpg'>"; 
 
    
 
} 
 
}

<div class="photo"></div> 
 
<div class="photo"></div> 
 
<div class="photo"></div> 
 
<div class="photo"></div> 
 
<div class="photo"></div> 
 
<button onclick="generatePhotos()"> Generate photos</button>

來源

2016-10-10 20:58:24 Marcin

這看起來非常有希望，我必須等到我今晚回到家以後，但從外觀上看，我可能已經格式化了我的innerHTML錯誤。將於今晚稍後更新。我仍然是HTML和JavaScript的新手，但看起來我已經將整個innerHTML包含在引號中，從而避免使用本地變量i獲取指向哪個圖像編號的值。 – MrKyle

這個答案完美工作，甚至允許我相對容易地動態命名每張照片，我真的很感謝幫助。 – MrKyle

注意使用的引號類型：「string」+ var +「string ='string2'」; – Marcin

馬爾辛ç答案使用Javascript 「只有」

function createImage(){ 
 
    var maxImages=5; 
 
    for(var i = 1; i<= maxImages; i++){ 
 
    var img = new Image(); 
 
    //You can add any style to the images with "style" or calling a predefined CSS "className" 
 
    img.style = "width:80px;height:80px"; 
 
    img.src = "http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/" + i +".jpg"; 
 
//instead of "body" you can append to any other element 
 
    document.body.appendChild(img); 
 
    } 
 
} 
 
//Function call 
 
createImage();

替代

來源

2016-10-10 21:10:06

使用javascript創建具有不同圖像的細節元素

回答

相關問題