基于img src jquery创建下载链接

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，它可以使用所需的图标数重现您的输出：

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'); 
})

如果您想使用这些图标，请使用很棒的字体：

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

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

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

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

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

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

      //Append Download Link to Caption
      $('.gallery-caption').each(function(ind_2, elem_2) { 
      add_id = 'a_' + Math.floor((Math.random() * 100000) + 1);
      download_ids_hold.push(add_id)
      if(index == 0) { 
        $(this).append('<a id=' + add_id + ' download><i class="fa fa-download" aria-hidden="true"></i></span></a>'); 
      }
      })
   });
   for(id=0;id<download_ids_hold.length;id++) { $('#' + download_ids_hold[id]).attr('href', imgSrc_hold[id]) }
});

我们跟踪图像来源和下载 ID，并在最后适当地使用它们。