javascript -将url交换为下载链接

Question

我有一个简单的html网站，在顶部是一个主图像与下载按钮。下载使用html5 download属性。

现在我在主图像下面有了一些缩略图-当单击这些缩略图时，会用缩略图替换主图像。

以下问题:我使用相同的javascript代码也将下载按钮的url替换为缩略图url，但当单击下载按钮时，它仍然从html打开硬编码的下载链接，而不是使用替换的url。

HTML

<div class="dwnldcntnr">
 <img src="imgage1.jpg" alt="Image Title 1" />
  </div>

<div id="btncntnr">
 <a href="imgage/image1.jpg" download="image1.jpg">
 <button id="btn">Download</button></a>
  </div>

<div class="itemcntnr">
 <a href="image2.jpg" title="2.jpg">
 <img src="image2.jpg" />
  </a></div>

用于将下载url替换为缩略图url的JS代码

    <script type="text/javascript">
$(document).ready(function() {
    $('.itemcntnr a').click(function() {
        var path = $(this).attr('href');
        $('#btncntnr a').attr('href', path)
                             .attr('download', $('a', this).attr('title'));
        return false;
    });
});
</script>

Answer 1

尝试替换整个DOM元素。

我认为不应该在a标记中嵌套button，因为它们都是具有本机交互性的元素。在IE的早期版本中，你很可能会遇到HTML解析错误。

$('.itemcntnr a').click(function() {
    var $this = $this.clone().empty().html('Download');
    $('#btncntnr a').replaceWith($this);
    return false;
});

Answer 2

不要将链接的硬编码href放在html中，而是尝试将其添加到$(document).ready上

我也同意阿伦的观点，你永远不应该把button放在a标签里。而是将样式应用于a标记，使其看起来像一个按钮