Question

我无法找到一种方法来制作网站上的所有图像自身链接，因此单击的图像会在新窗口中打开。

当前我正在使用HTML来执行此操作，但是，我只希望HTML中包含图像代码，并使用jQuery添加链接。

例如，HTML加载如下：

<img src="/img/01.jpg">

我想使用jQuery将其更改为此：

<a href="/img/01.jpg"><img src="/img/01.jpg"></a>

我一直以如下方式进行处理：

$("img").wrap($('<a>',{
  href: ''
}));

我只是不知道如何继续下去。如何从img中提取链接并将其放置在“ href”位之后。

Answer 1

您可以通过为wrap()提供一个函数来实现所需的功能，该函数返回a元素以包装特定的img实例。此函数应用于每个{{1 }}，您可以分别使用img来检索要在创建的this.src元素上设置的href属性。试试这个：

$("img").wrap(function() {
  return $('<a>', {
    href: this.src
  });
});

Answer 2

您可以使用each来迭代a元素。然后用href得到attr('href')的值。

find将允许您获取与链接关联的img元素。

然后，您只需使用attr('href')将img的值设置为attr('src', myValue)。

$(function(){
  $('a').each(function(){
    var href = $(this).attr('href');
    $(this).find('img').attr('src', href);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="/img/01.jpg"> <img src=""> </a>
<a href="/img/02.jpg"> <img src=""> </a>

Answer 3

据我了解，您有一堆具有img属性的src。并且您希望当用户单击它们时使用src链接打开一个新标签。

您可以通过将它们包装在a标记中来完成此操作，也可以使用单击功能打开带有该链接的新标签。

解决方案1.用a标签包裹。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/150"/>
<img src="https://via.placeholder.com/250"/>

解决方案2.具有单击功能

const img = $('img');
$(img).click(function() {
  const src = $(this).attr('src');
  window.open(src, '_blank')
});

img {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/150"/>
<img src="https://via.placeholder.com/250"/>

Answer 4

对于具有相同CSS类名称的每张图片，请使用图片的src锚点将其包围起来

$(document).ready(function() {
var someimage = document.getElementsByClassName("myimg"); 
for(var i = 0; i<= someimage.length -1; i++){
	var mysrc = someimage[i].src;
	$(someimage[i]).wrap("<a href=\""+mysrc+"\" target=\"new\"></a>"); 
	}
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="myimg" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt="" style="width:50px;height:50px">

<img class="myimg" src="https://image.flaticon.com/icons/png/128/69/69407.png" alt="" style="width:50px;height:50px">

如何使用jQuery使图像链接到其自身的来源？

4 个答案: