0

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

现在我在主图像下方有一些缩略图 - 单击时将主图像替换为缩略图图像。

以下问题：我使用相同的 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>

用缩略图网址替换下载网址的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>
4

2 回答 2

0

尝试替换整个 DOM 元素。

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

$('.itemcntnr a').click(function() {
    var $this = $this.clone().empty().html('Download');
    $('#btncntnr a').replaceWith($this);
    return false;
});
于 2013-11-07T13:33:49.043 回答
0

不要在 html 中为链接添加硬编码的 href，而是尝试将其添加到$(document).ready
我也同意 ahren 的观点，即您永远不应该将button其放入a标签中。而是将样式应用于a标签，使其看起来像一个按钮

于 2013-11-07T13:54:34.980 回答