js实现点击复制文本内容

要实现如下图，点击不同的微信复制微信并调出微信界面的功能

html构成，css样式自己写

<a href="weixin://">
    <div class="row">
        <div class="col-xs-4 kong">
            <img class="imgwid" src="./img/show1.png" alt="">
            <div style="height: 8px;"></div>
            <div class="showdi" id="copyBT">
                <img class="imgwid" src="./img/wx.png" alt="">
                <div class="wenzi">添加微信:<span id="content">we</span></div>
            </div>
        </div>
        <div class="col-xs-4 kong">
            <img class="imgwid" src="./img/show2.png" alt="">
            <div style="height: 8px;"></div>
            <div class="showdi" id="copyBT1">
                <img class="imgwid" src="./img/wx.png" alt="">
                <div class="wenzi">添加微信:<span id="content1">we</span></div>
            </div>

        </div>
        <div class="col-xs-4 kong">
            <img class="imgwid" src="./img/show3.png" alt="">
            <div style="height: 8px;"></div>
            <div class="showdi" id="copyBT2">
                <img class="imgwid" src="./img/wx.png" alt="">
                <div class="wenzi">添加微信:<span id="content2">we</span></div>
            </div>

        </div>
        <div class="col-xs-4 kong">
            <img class="imgwid" src="./img/show4.png" alt="">
            <div style="height: 8px;"></div>
            <div class="showdi" id="copyBT3">
                <img class="imgwid" src="./img/wx.png" alt="">
                <div class="wenzi">添加微信:<span id="content3">we</span></div>
            </div>
        </div>
        <div class="col-xs-4 kong">
            <img class="imgwid" src="./img/show5.png" alt="">
            <div style="height: 8px;"></div>
            <div class="showdi" id="copyBT4">
                <img class="imgwid" src="./img/wx.png" alt="">
                <div class="wenzi">添加微信:<span id="content4">we</span></div>
            </div>
        </div>
        <div class="col-xs-4 kong">
            <img class="imgwid" src="./img/show6.png" alt="">
            <div style="height: 8px;"></div>
            <div class="showdi" id="copyBT5">
                <img class="imgwid" src="./img/wx.png" alt="">
                <div class="wenzi">添加微信:<span id="content5">we</span></div>
            </div>
        </div>
    </div>
</a>
           

js部分

function copyArticle(con) {
     const range = document.createRange();
     range.selectNode(document.getElementById(con));
     const selection = window.getSelection();
     if(selection.rangeCount > ) selection.removeAllRanges();
     selection.addRange(range);
     document.execCommand('copy');
     alert("复制成功！");
 }
           

只需要重复调用这个函数，传不同的参数即可

$('#copyBT').click(function () {
        copyArticle('content')
    });
    $('#copyBT1').click(function () {
        copyArticle('content1')
    });
    $('#copyBT2').click(function () {
        copyArticle('content2')
    });
    $('#copyBT3').click(function () {
        copyArticle('content3')
    });
    $('#copyBT4').click(function () {
        copyArticle('content4')
    });
    $('#copyBT5').click(function () {
        copyArticle('content5')
    });
           

此代码不是最优化的代码，本人不是前端，js不熟练，但是实现功能是没有问题的，此代码仅供参考