IMG數組與鏈接

Question

我想知道如何把這個圖像鏈接？只需在顯示的每個圖片上添加鏈接即可。

var imgs = ['http://radio-maghreb.net/inter/smooth24.7.png', 'http://radio-maghreb.net/inter/smooth24.7.png', 'http://radio-maghreb.net/inter/smooth24.7.png']; 
 
var container = document.getElementById('imageContainer'); 
 
var docFrag = document.createDocumentFragment(); 
 

 
imgs.forEach(function(url, index, originalArray) { 
 
    var img = document.createElement('img'); 
 
    img.src = url; 
 

 
    docFrag.appendChild(img); 
 
}); 
 

 

 
container.appendChild(docFrag);

#imageContainer img { 
 
    width: 53px; 
 
    height: 53px; 
 
    border-radius: 5px; 
 
    margin: 10px; 
 
}

<div id="imageContainer"></div>

Answer 1

你可以做到這樣：

var imgs = [ 
    'http://radio-maghreb.net/inter/smooth24.7.png', 
    'http://radio-maghreb.net/inter/smooth24.7.png', 
    'http://radio-maghreb.net/inter/smooth24.7.png' 
]; 
var container = getElementById('imageContainer'); 
var docFrag = document.createDocumentFragment(); 

imgs.forEach(function(url, index, originalArray) { 
    var link = document.createElement('a'); 
    link.title = 'My title'; 
    link.href = 'http://example.com/my_path/to/some_page'; 

    var img = document.createElement('img'); 
    img.src = url; 

    link.appendChild(img); 
    docFrag.appendChild(link); 
}); 


container.appendChild(docFrag); 

我們首先創建一個鏈接（ '一' 元素），那麼我們將圖像附加到該鏈接，最後我們將鏈接附加到容器。

這只是其中一種解決方案。我們可以使用.innerHTML（），或者我們可以用像jQuery這樣的庫更有效地實現它。