jquery或html下載圖片onclick或鏈接

Question

我有一個圖像，我希望用戶點擊以便能夠下載（保存）。

當前單擊時，下載框會彈出image.jpg標記，並允許用戶保存。

我正在使用HTML：

<a href="folio/1.jpg" download><img src="folio/1.jpg"/></a>

這很好用，但我有很多圖像，有沒有辦法使用jQuery做類似的事情

jQuery(function($){
$("a").prop("href", "(this)")
});

下載圖像而不必兩次輸入它所以它看起來像這樣：

<a href="" download><img src="folio/1.jpg"/></a>

我正在嘗試簡化編碼，以便輕松點擊圖像下載它，而不是必須右鍵單擊以保存它。

謝謝你的幫助。

Answer 1

這將適用於頁面上的每個圖像，它是錨點的直接子項，但您可以使用：

$('a > img').each(function(){
  var $this = $(this);
  $this.parent('a').attr('href', $this.attr('src'));
});

但它會完成這項工作。

但唯一的問題是，禁用JS的用戶將看到一個帶有空href的錨點。 以下將實現相同的最終結果，同時還可以簡化代碼（更清晰的HTML）並添加優雅降級：

<img src="folio/1.jpg" class="downloadable" />

和

$('img.downloadable').each(function(){
  var $this = $(this);
  $this.wrap('<a href="' + $this.attr('src') + '" download />')
});

看到它在行動： http ： //jsfiddle.net/MW9E4/1/