运用jQuery剪切版插件实现复制粘贴功能

今天遇到这么一个功能，，点击“复制“按钮，可以进行复制。

当时在做vue项目的时候有用到过vue的剪切版组件。可是这个后台系统是用jquery写的。当时就想到肯定有这么一个插件。
一番搜索之后，找到了。

参考博客 http://blog.wpjam.com/m/clipboard-js/

这里我就不一一说明了，这里强调的是，在我的项目出现的问题。
上代码

参考博客中有提到：如果复制的文字是隐藏的，可以通过 data-clipboard-text 定义到点击的按钮上

HTML

<a data-clipboard-text ="{{url('/api/admin/answer/questionnaire/get')}}?language=1&questionnaire_id={{$questionnaire->id}}" 
class="copy-data">复制</a>
<!--自定义的data-clipboard-text的值，是我用php写的，不必理会，总之，是每一条都不一样。-->

JS

<script type='text/javascript' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>   //clipboard.js的cdn资源
<script type="text/javascript">
    //设置剪切板数据
	var copyValue =  $(".copy-data").data("clipboard-text");

    var clipboard = new Clipboard('.copy-data', {
        text: function(){
	        return copyValue;
        }
    });

    clipboard.on("success",function (e) {
	    //自己写的一个“复制成功“的提示语,复制成功后执行
        $(".copy-success-box").show();
        setTimeout(function () {
            $(".copy-success-box").hide();
        },1500);
    })
</script>

但是问题来了，我的项目是不能按照博主所说，将复制内容存到定义的变量中，因为我的有很多个，如果存储起来的话，只会展示最后一个。
所以自己根据事件委托，小小的改进了一下。

<script type="text/javascript">
    //设置剪切板数据
    var clipboard = new Clipboard('.copy-data', {
        text: $(".copy-data").on("click",function (e) {//点击之后，再拿到当前点击的那一个存储的值
            let $target = $(e.target);
            return $target.data(`clipboard-text`);
        })
    });

    clipboard.on("success",function (e) {
        $(".copy-success-box").show();
        setTimeout(function () {
            $(".copy-success-box").hide();
        },1500);
    })
</script>

这样改动之后就可以做到，点击每一个复制都会复制的是当前的内容，而不会影响其它的项。