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不熟練，但是實作功能是沒有問題的，此代碼僅供參考