javascript-为下载链接交换url

我有一个简单的html网站，上面是一个带有下载按钮的主图像。 下载与html5下载属性一起工作

现在，我在主图像下面有一些缩略图-单击后，用缩略图替换主图像

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

HTML

用缩略图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>

$（文档）.ready（函数（）{
$（'.itemcntnr a'）。单击（函数（）{
var path=$（this.attr（'href'）；
$（'btncntnr a'）.attr（'href'，path）
.attr（'download'，$（'a'，this.attr（'title'）；
返回false；
});
});

尝试替换整个DOM元素

我认为不应该在

标记中嵌套
按钮
，因为它们都是具有本机交互性的元素。在早期版本的IE中，您很可能会遇到HTML解析错误

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

不要将链接的硬编码href放在html中，而是尝试将其添加到
$（文档）中。准备好了吗

我也同意ahren的观点，即您不应将
按钮
放在
标签内。相反，将样式应用于
a
标记，使其看起来像一个按钮
硬编码的href在那里，因为打开页面时主图像需要有其下载url。没错，它确实需要下载url。但是硬编码可能会缓存它，请尝试将其放在document.ready函数中作为
$（'#btncntnr a'）.attr（'href'，'imgage/image1.jpg'）
感谢您的帮助。它似乎在我的代码中不起作用，因为图像交换代码和url交换代码之间存在冲突。我分别使用每个脚本，因此当我删除用于图像交换的脚本时，它可以工作，但我需要两者。有什么想法吗？谢谢你花这么多时间。在你的小提琴中，有两个弹出窗口显示+图像交换。这是我以前做的一把小提琴，在那里你可以看到我已经开始工作的图像行为。你知道我如何使用像我上面发布的小提琴一样的图像行为，同时更改url吗？谢谢你的帮助，但是更换js并不能解决问题。我会考虑更改A内的按钮，谢谢提示。@ D.M-抱歉，我刚刚意识到我的代码中有一个错误（我引用了代码> $（this）< /代码>，而不是创建的变量<代码> $<这个/<代码>）。请使用上面的内容再试一次。仍然没有：/It's some widget，因为我的代码完全可以替换onclick上的图像，但不能替换href。@D.M-我刚刚意识到克隆的元素没有
download
属性。试着在？我猜
$（'a'，this）.attr（'title'）
应该是
$（this.attr（'title'）
）。而且，由于您使用的是HTML5，所以可以使用数据属性来存储数据。标题不用于存储变量
$('.itemcntnr a').click(function() {
    var $this = $this.clone().empty().html('Download');
    $('#btncntnr a').replaceWith($this);
    return false;
});