基於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演示

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，並在末尾適當使用它們。