href-Javascript中的输出变量

Output variable inside an href - Javascript

本文关键字：变量 输出 href-Javascript      更新时间：2023-09-26

我正在为我的图库使用放大弹出菜单。当你点击缩略图时，它会弹出图像。我正在尝试在弹出窗口中添加一个"下载图像"按钮。我有显示良好的HTML片段，但下载链接的href需要填充img url。

这是JS代码：

markup: '<div class="mfp-figure">'+
                '<div class="mfp-close"></div>'+
                '<div class="download-img"><a href="#">Download image</a></div>'+
                '<figure>'+
                    '<div class="mfp-img"></div>'+
                    '<figcaption>'+
                        '<div class="mfp-bottom-bar">'+
                            '<div class="mfp-title"></div>'+
                            '<div class="mfp-counter"></div>'+
                        '</div>'+
                    '</figcaption>'+
                '</figure>'+
            '</div>',

如何将image src变量放在锚点的href中？

如果您检查放大弹出API，您将看到它为事件markupParse 提供回调

因此，将其添加到您的放大弹出选项中

callbacks: {
      markupParse: function(template, values, item) {
       template.find('.download-img a').prop('href',item.src);
      }
    }

上的完整演示http://codepen.io/gpetrioli/pen/reoqQv

只需将变量放在引号之外。

markup: '<div class="mfp-figure">'+
                '<div class="mfp-close"></div>'+
                '<div class="download-img"><a href="' + yourVar + '">Download image</a></div>'+
                '<figure>'+
                    '<div class="mfp-img"></div>'+
                    '<figcaption>'+
                        '<div class="mfp-bottom-bar">'+
                            '<div class="mfp-title"></div>'+
                            '<div class="mfp-counter"></div>'+
                        '</div>'+
                    '</figcaption>'+
                '</figure>'+
            '</div>',

下面的链接向您展示了使用href的多种方法，有些是好的，有些是坏的。看看https://stackoverflow.com/a/11348403/886393

特别是用户名demp的答案。

谢谢，Paras

相关文章：