Question

我想知道如何将这些图像转换为链接？只是一种在显示的每个图像上添加链接的方法。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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);

我们首先创建一个链接（'a'元素），然后我们将图像附加到该链接，最后我们将链接附加到容器。

这只是其中一种解决方案。我们可以使用.innerHTML（），或者我们可以使用像jQuery这样的库来更有效地完成它。

带链接的img数组

1 个答案: