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