Question

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

现在我在主图像下面有一些缩略图 - 点击时用缩略图替换主图像。

以下问题：我使用相同的JavaScript代码也用缩略图网址替换下载按钮的网址，但是当点击下载按钮时，它仍然会从html打开硬编码的下载链接，而不是使用替换的网址。< / p>

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>

使用缩略图网址替换下载网址的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元素。

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

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

Answer 2

请勿在html中为链接添加硬编码href，而是尝试在$(document).ready上添加
我同意你不应该将button放在a标签内。而是将样式应用于a标记，使其看起来像一个按钮

javascript - 交换网址下载链接

2 个答案: