javascript - 基于 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，并在最后适本地使用它们。