Question

我有几个不同的图像库，有图像标题。我正在尝试将相应图像的下载链接附加到每个图库标题的末尾。下载链接需要基于每个图像的img src。

我可以将下载链接附加到标题。但是，它还会为每个图像标题上的图库中包含的每个图像添加下载图标。而不是每个图像一个下载链接。

HTML

<div>
    <figure class="gallery-item">
        <!-- BoGalleryImg -->
        <div class="gallery-icon landscape">
            <a href="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2515.jpg" data-rel="lightbox-gallery-1">
                <img width="300" height="250" src="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2515.jpg" class="attachment-full size-full" alt="" aria-describedby="gallery-1-823">
            </a>
        </div>
        <!-- EoGalleryImg -->
        <!-- BoCaption -->
    <figcaption class="wp-caption-text gallery-caption" id="gallery-1-823">
        <a target="_blank" href="https://jira.j2noc.com/jira/browse/CRKIS-2515">
            CRKIS-2515
        </a>
    </figcaption>
    <!-- EoCaption -->
    </figure>

    <br />

    <figure class="gallery-item">
        <!-- BoGalleryImg -->
        <div class="gallery-icon landscape">
            <a href="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2379b.jpg" data-rel="lightbox-gallery-1"><img width="300" height="250" src="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2379b.jpg" class="attachment-full size-full" alt="" aria-describedby="gallery-1-817"></a>
        </div>
        <!-- EoGalleryImg -->
        <!-- BoCaption -->
        <figcaption class="wp-caption-text gallery-caption" id="gallery-1-817">
            <a target="_blank" href="https://jira.j2noc.com/jira/browse/CRKIS-2379B">
                CRKIS-2379B
            </a>
        </figcaption>
    <!-- EoCaption -->
    </figure>
</div>

的jQuery

$(document).ready(function() {
    $('.attachment-full').each(function(index, element){
        // create variable from img src
        var imgSrc = $(element).attr('src');
        console.log(imgSrc);  

        //Append Download Link to Caption
        $('.gallery-caption').append('<a href="'+imgSrc+'"  download><span class="glyphicon glyphicon-download-alt icon-download"></span></a>'); 
    }); 
});

我一直试图解决这个问题已经有几天了，而且我很接近我只是不确定如何让它只为相应的图像添加一个下载图标。提前感谢您提供任何帮助。

我的CODEPEN DEMO

Answer 1

你的html解析有点毛茸茸。下面是一些jQuery使用所需的图标计数重现您的输出：

gcc -S -m32 sample.c
gcc -o hello_asm -m32 sample.s

如果您想使用这些图标带来令人敬畏的字体：

images = ['http://srsounds.com/j3/images/easyblog_articles/2943/han_solo.jpg', 'https://lumiere-a.akamaihd.net/v1/images/chewie-db_2c0efea2.jpeg?region=0%2C154%2C1592%2C796'];
labels = ['CRKIS-2515', 'CRKIS-2379B']

images.forEach(function(value, index) {
    $('body').append("<img src=" + value + " width=350><br>" + labels[index] + " <i class='fa fa-download' aria-hidden='true'></i><br><br>");
    $('body').css('color', 'steelblue'); 
})

您的画廊布局可能还有其他要求，但希望这有助于您开始采用更清洁的方法。

如果您在向图标添加链接属性时遇到问题，或者实现其他布局，请告知我们。

********编辑********

如果您希望/需要坚持原始方法，请将您的jQuery更改为：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

我们跟踪图像源并下载ID，并在最后使用它们。

创建基于img src Jquery的下载链接

1 个答案: