使用javascript在特定圖像之後插入文本

在一個函數中，我有一個使用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。我不能在代碼將它們組合起來，因爲其他併發症的

來源

2016-11-26 Chris

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

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

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

您正在創建圖像的循環，爲圖像提供一個唯一的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); 
    } 
    } 
}

來源

2016-11-26 04:18:18

嘗試做這樣的事情：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); 

    } 
}

來源

2016-11-26 03:56:52

您可以用單迴路，並使用圖和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>

來源

2016-11-26 04:17:48 Deep

使用javascript在特定圖像之後插入文本

回答

相關問題