使用 JS 从图像中获取动态 id 和 url

Question

我正在我的项目中实现一个fancybox，我正在编写一个脚本来自动将一个锚点包裹在图像周围，url 到图像和一个“data-fancybox”属性让fancybox 脚本完成它的工作。 但是，我只将 url 放到第一个图像中，因为它们都共享相同的 class。 有一个动态图形 id 似乎是可以得到的。

我的问题是 - 我如何使用这个数字 id 来获取适当的 img src？

html是这样的：

    <figure id="XXXXXXX">
    <div>

    <img src="image.jpg" />

    </div>
    </figure>

... other stuff ...

    <figure id="YYYYYYY">
    <div>

    <img src="image2.jpg" alt="">

    </div>
    </figure>

我现在的代码如下（有效，但只返回第一个图像 url）：

$(document).ready(function() {
        var src = $("figure img").attr("src");
        var a = $("<a/>").attr( { href:src , "data-fancybox":"" } );
        $("figure img").wrap(a);
});

我知道我可以使用

var id = $("figure").attr("id");

得到我需要的 id，但我对编码很陌生，所以我不确定我如何实现它并使用它来获得正确的 url。 任何帮助表示赞赏！

Answer 1

如果您的目标是让您的图像可点击，那么您可以这样做：

$('figure img').each(function() {
  $(this).parent().css({cursor: 'pointer'}).attr('data-fancybox', 'gallery').attr('data-src', this.src);
});

演示 - https://jsfiddle.net/1jznsL7x/

提示：无需创建锚元素，您可以将data-fancybox和data-src属性添加到任何元素，它会自动工作。