使用 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>

我现在的代码如下（有效，但只有 returns 第一张图片 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 属性添加到任何元素，它会自动工作。

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

Fetching dynamic id and url from image with JS

fancybox