0

我想<img>通过外部 js 文件将每个链接变成指向自身（文件）的链接。

我的想法是，我可以定位所有 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 周围添加链接。

4

3 回答 3

3

抓住你所有的图像。

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]);
};
于 2013-02-26T16:33:57.470 回答
2

以防万一您使用 jQuery

$('img').each(function(ix, image){
  $(image).wrap('<a target="_blank" href="' + $(image).attr('src') + '"></a>');
})
于 2013-02-26T16:32:23.213 回答
1

如果你愿意使用jQuery，代码很简单：

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

否则，您将不得不研究JavaScript一个更复杂的原始解决方案。请参阅@Barney 的回答。

于 2013-02-26T16:34:17.950 回答