Question

简短摘要：我处于Jekyll状态，我需要为每个单独的图像找到src网址并将其发回到一个href =“imgurl”中。 jQuery或Javascript。

到目前为止我尝试了什么：

$(document).ready(function(){

    var postTitle = document.title.replace(/ /g,'');   

    $("article img").each(function() {  
    imgsrc = this.src;
    console.log(imgsrc);
    });

    $("article img").wrap('<a href="' + imgsrc + '" data-lightbox="' + postTitle + '"></a>');

我将文章img包装在a-tag中的原因是因为我用于降价的prose.io会自动在p-tag中分配图像。

我最终想要做的是将所有图像分组到同一个帖子（数据灯箱）中，并自动从添加的图像到页面创建一个灯箱库。

使用我现有的代码，我设法从第一个添加的图像中获取网址，但不幸的是，帖子中的所有图像都被分配了与第一个相同的网址。它们在现场显示为正确的图像，但是网址与第一个图像（数组中的位置[0]）相同。当我点击图像时，灯箱会打开并显示正确数量的图像，但它们都显示第一张图像。 console.log正确打印帖子中图像的所有网址。

EDIT-BONUS：已验证！作为一个额外的问题：如果我使用alt文本做同样的事情，将其复制到data-title属性，我将如何进行？目前有这个：

var altText = $("img", this).attr("alt");

    $("article img").each(function() {
    $(this).wrap('<a href="' + this.src + '" data-lightbox="' + postTitle + '" data-title="' + altText + '"></a>');

}）;

同样，它只是让我获得第一张图片alt，并将其分配给所有图片。

我希望你们中的一些人知道如何解决这个烂摊子。

提前，谢谢你的时间！

Answer 1

每次有图像时，您都会覆盖imgsrc。

尝试这样的事情：

$("article img").each(function() {
    var src = this.src;
    var alt = $(this).attr("alt");
    $(this).wrap('<a href="' + src + '" data-lightbox="' + postTitle + '" data-title="' + alt + '"></a>');
});

检查.attr()以获取更多信息！

查找帖子中所有图像的图像src url

1 个答案: