如何在同一页面设置多个复制链接按钮？

Question

我已经处理这个问题大约两周了。

总结： 这与复制页面内的链接有关。我知道如何使用 CTRL-C 进行复制，但我想提供一个按钮，用户可以单击该按钮从页面内复制链接。

概述 我有大约 100 个 PDF，它们的链接出现在同一页面上。我想为每个链接添加一个“复制链接”按钮。每个“复制链接”按钮将独立获取各自的 PDF URL。

样品：

'PDF One'  -  Copy Link Button  (this will copy the 'PDF One' URL)
'PDF Two'  -  Copy Link Button  (this will copy the 'PDF Two' URL)
'PDF Three'  -  Copy Link Button  (this will copy the 'PDF Three' URL)

...等等等等

到目前为止，我已经尝试了大约 6 个不同的脚本，所有脚本基本上都集中在地址栏的 URL 上，或者它仅针对一个脚本起作用，因此它不会执行超过两个。

有什么建议或代码片段可以让我朝着正确的方向前进吗？

注意：这是针对 WordPress 网站的。

谢谢你。

Answer 1

我找到了使用此代码的解决方案。工作完美。

<script>
    $(document).ready(function() {
        // When a copy button is clicked
        $(".copy-button").on("click", function() {
            var urlToCopy = $(this).data("url");

            // Create a hidden input field to copy the URL text
            var $temp = $("<input>");
            $("body").append($temp);
            $temp.val(urlToCopy).select();
            document.execCommand("copy");
            $temp.remove();

            alert("Copied: " + urlToCopy);
        });
    });
</script>

<button class="copy-button" data-url="https://example.com/link1">Copy Link 1</button>
<button class="copy-button" data-url="https://example.com/link2">Copy Link 2</button>
<button class="copy-button" data-url="https://example.com/link3">Copy Link 3</button>