javascript - 如何为复制到剪贴板制作多重选择器或多重 ID

Question

我非常喜欢在我的网站上复制到剪贴板，这里是我感兴趣的示例。

(function() {

    "use strict";

    function copyToClipboard(elem) {

        var target = elem;

        // select the content
        var currentFocus = document.activeElement;

        target.focus();
        target.setSelectionRange(0, target.value.length);
        // copy the selection
        var succeed;

        try {
            succeed = document.execCommand("copy");
        } catch (e) {
            console.warn(e);
            succeed = false;
        }
        // Restore original focus
        if (currentFocus && typeof currentFocus.focus === "function") {
            currentFocus.focus();
        }

        if (succeed) {
            $(".copied").animate({
                top: -25,
                opacity: 0
            }, 700, function() {
                $(this).css({
                    top: 0,
                    opacity: 1
                });
            });
        }
        return succeed;
    }

    $("#copyButton, #copyTarget").on("click", function() {

        copyToClipboard(document.getElementById("copyTarget"));
    });
}());

这是代码笔 https://codepen.io/LattyS/pen/QvGyKL

但是我有两个问题

1. 当我尝试创建多个链接时，如果我点击任何一个链接，所有链接都会被复制在一起。
2. 如何创建DIV

所以我需要同时创建 10 个以上的链接，同一个元素是否也可以使用 DIV 复制到剪贴板？就像图片中的这个 https://gulfupload.com/i/00025/fq8kg0ef7gw6.png

Answer 1

(function () {

    "use strict";

    function copyToClipboard(elem) {

        var target = elem;

        // select the content
        var currentFocus = document.activeElement;

        target.focus();
        target.setSelectionRange(0, target.value.length);

        // copy the selection
        var succeed;

        try {

            succeed = document.execCommand("copy");
        } catch (e) {

            console.warn(e);

            succeed = false;
        }

        // Restore original focus
        if (currentFocus && typeof currentFocus.focus === "function") {

            currentFocus.focus();
        }

        if (succeed) {

            $(target).closest('.input-group').find('.copied').animate({top: -25, opacity: 0}, 700, function () {

                $(this).css({top: 0, opacity: 1});
            });
        }

        return succeed;
    }


    $(".copyButton").on("click", function () {

        var parent = $(this).closest('.input-group');

        copyToClipboard(parent.find(".copyTarget")[0]);
    });
}());

用于从多个链接一次复制单个链接的 Codepen 链接:https://codepen.io/anon/pen/ELXWaG