2016-11-26 33 views
0

在一個函數中,我有一個使用createElement();創建10個圖像的循環。在另一個函數中,我有另一個循環,其中包含我需要在每張圖片之後添加文本的信息,但是我的代碼在所有10張圖片的末尾添加了它,我需要它們在每張對應的圖片之後。 這是顯示文本的功能:使用javascript在特定圖像之後插入文本

function displayAlbum(json){ 
    for (var x = 0; x<json.length;x++){ 
    var span1 = document.createElement("span"); 

    span1.innerText = json[x].album; 
    console.log(json[x].album); 
    var display = document.getElementById("results"); 
    display.appendChild(span1); 
    } 
} 

我不能單獨設置每個圖像的ID,因爲我在JS創建它們。感謝提前的幫助和沒有jQuery,請

for (var x = 0; x<json.length;x++){ 
    var image = document.createElement("img"); 
    image.id = "picture"; 
    image.width = 100; 
    image.height = 100; 
    image.src = json[x].cover; 
    var display = document.getElementById("results"); 
    display.appendChild(image); 

    var a = document.getElementById("artist"); 
    var y = document.getElementById("year"); 
    var artist = document.getElementById("artist").selectedIndex;//index of value of the switch statement 
    var year = document.getElementById("year").selectedIndex;//index of value of the switch statement 
    var realYear = y[year].text;//Value of the selected text 
    var realArtist = a[artist].text;//Value of the selected text 
    var display = document.getElementById("Results"); 
    } 

這是我的第二個循環。我想在每張照片後都顯示displayalbum。我不能在代碼將它們組合起來,因爲其他併發症的

+0

你爲什麼不把2個循環放到1個循環中?另外,請顯示您現在擁有的兩個循環。 –

+0

那麼爲什麼你不能把2個循環變成1呢? –

+0

我有if語句調用每個函數,我給它們一個值,但是當我一個接一個地調用它們時,值會改變。所以我必須將它們分開並加載第一個函數,調用第二個函數,並將相同的變量賦值爲不同的值 – Chris

回答

0

您正在創建圖像的循環,爲圖像提供一個唯一的ID,如image.id = "picture" + x;

然後更改displayAlbum()函數以使用相應的圖像放置span標記。

function displayAlbum(json){ 
    for (var x = 0; x<json.length;x++){ 
    var span1 = document.createElement("span"); 
    span1.innerText = json[x].album; 
    console.log(json[x].album); 

    var display = document.getElementById("results"); 
    var img = document.getElementById("picture" + x); // use unique id of img to access it 
    if(img.nextSibling) { // if img is not the last node in 'results' 
     display.insertBefore(span1, img.nextSibling); 
    } else { // if img is the last node in 'results' 
     display.appendChild(span1); 
    } 
    } 
} 
1

嘗試做這樣的事情:plunker

function displayAlbum(){ 
    for (var x = 0; x < 10 ; x++){ // change to json.length 
    var span1 = document.createElement("span"); 

    span1.innerText = 'json[x].album'; 
    span1.id = 'span'+x; 

    var display = document.getElementById("results"); 
    display.appendChild(span1); 

    } 
} 
0

您可以用單迴路,並使用圖和FigCaption元素實現自己的目標,專門針對這種創建其描述顯示圖像的

var json = [{cover:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Internet2.jpg/440px-Internet2.jpg", album:"test1"},{cover:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Internet2.jpg/440px-Internet2.jpg", album:"test2"}]; 
 

 

 

 
for (var x = 0; x<json.length;x++){ 
 
    
 
    var fig = document.createElement("figure"); 
 
    var figCap = document.createElement("figcaption"); 
 
    figCap.innerText = json[x].album; 
 
    var image = document.createElement("img"); 
 
    image.id = "picture"; 
 
    image.width = 100; 
 
    image.height = 100; 
 
    image.src = json[x].cover; 
 
    var display = document.getElementById("results"); 
 
    fig.appendChild(image); 
 
    fig.appendChild(figCap); 
 
    display.appendChild(fig); 
 

 
    }
<div id="results"> 
 
    </div>

相關問題