Question

美好的一天，我想在我的网站上使用Lightbox，我想用灯箱改变img视图......

$('img').wrap('<a href="#" data-lightbox="lightbox" class="lightbox-link"></a>');
$('.lightbox-link').attr({'href': $('img').attr('src')});

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
</head>
<body>
<div>
  <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/>
  <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" />
  <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" />
</div>
  
  <script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-plus-jquery.min.js"></script>
    
</body>
</html>

问题是，当我使用jQuery获取img src时，他只获得第一个和src并将他放入所有链接属性href ...我如何获得所有src 1}}并输入相应的链接？

Answer 1

使用每个循环来循环每个img并使用当前图像src

分别包装每个图像

$('img').each(function() {
  $(this).wrap('<a href="' + $(this).attr('src') + '" data-lightbox="lightbox" class="lightbox-link"></a>');
})

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
</head>

<body>
  <div>
    <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="" />
    <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" />
    <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" />
  </div>

  <script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-plus-jquery.min.js"></script>

</body>

</html>

Answer 2

使用Arraymap函数。它将获得图像的所有src。并应用图像的find() src。

＆＃13;

$('img').wrap('<a href="#" data-lightbox="lightbox" class="lightbox-link"></a>');
$('.lightbox-link').map(function (){
 $(this) .attr({'href': $(this).find('img').attr('src')});
  })

＆＃13;

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
</head>
<body>
<div>
  <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/>
  <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" />
  <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" />
</div>
  
  <script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-plus-jquery.min.js"></script>
    
</body>
</html>

＆＃13;

Answer 3

$('img').wrap('<a href="#" data-lightbox="lightbox" class="lightbox-link"></a>');
$('.lightbox-link').each(function() {
$(this).attr({'href': $(this).children('img').attr('src')});
});

演示：https://jsfiddle.net/6z6h7mb7/1/

所以，你需要循环创建链接并获取子/图像src ... P.S＆gt;注意使用$（this）来指向当前元素，而不是你的选择器$（＆＃39; img＆＃39;）。

Answer 4

使用.find功能。

此外，您需要遍历超链接并获取图像后代。

查看参考here

$('img').wrap('<a href="#" data-lightbox="lightbox" class="lightbox-link"></a>');
$('.lightbox-link').each(function() {
     $(this).attr({'href': $(this).find('img').attr('src')});
});

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
</head>
<body>
<div>
  <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/>
  <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" />
  <img src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" />
</div>
  
  <script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-plus-jquery.min.js"></script>
    
</body>
</html>

如何获得杂项图像src jQuery

4 个答案: