Question

我正在项目中实现一个fancybox，并且正在编写一个脚本来自动在图像周围包裹锚点，并带有图像的url和“ data-fancybox”属性，以使fancybox脚本发挥作用。但是，我只获得第一个图像的URL，因为它们都共享同一类。有一个动态的数字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>

我现在的代码如下（可以正常工作，但仅返回第一个图像网址）：

$(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

1 个答案: