Question

我想通过外部js文件将每个<img>转换为自身（文件）的链接。

我的思维过程是我可以定位所有img元素，然后抓取图像src并在img元素周围放置一个链接。例如：

转过来：

<img width="281" vspace="7" hspace="5" height="215" align="left" alt="img1" src="cits/images/image001.jpg"></img>

进入这个：

<a href="cits/images/image001.jpg" target="_blank"> <img width="281" vspace="7" hspace="5" height="215" align="left" alt="img1" src="cits/images/image001.jpg"></img> </a>

看起来我可以将img src作为变量获取并找到img元素，但我不知道如何在img周围添加链接。

Answer 1

抓住所有图像。

var images = document.getElementsByTagName('img');

编写一个用新标记替换图像outerHTML的函数，包括指向图像src属性的链接，其中包含图像的旧outerHTML。

function makeLink(image){
    image.outerHTML = '<a target="_blank" href="' + image.src + '">' + image.outerHTML + '</a>';
}

循环浏览图片，并将每个图片提交到makeLink函数。

for(var i = 0, l = images.length; i < l; ++i){
    makeLink(images[i]);
};

Answer 2

以防您使用jQuery

$('img').each(function(ix, image){
  $(image).wrap('<a target="_blank" href="' + $(image).attr('src') + '"></a>');
})

Answer 3

如果您愿意使用jQuery，则代码非常简单：

$("img").each(function () {
    $(this).wrap($("<a target='_blank'/>").attr("href", $(this).attr("src"));
});

否则你将不得不研究一个原始的JavaScript解决方案，这个解决方案更加精细。见@ Barney的回答。

是否可以通过javascript将所有html图像转换为链接？

3 个答案: