jQuery选择器：如何实现点击不同ID元素分别复制内容到剪贴板

原有实现问题 #

原有代码仅绑定了单个ID元素的点击事件，且逻辑里硬编码了目标元素ID，只能实现单个元素的复制功能，无法适配多元素各自独立复制的需求。
原有代码如下：

<h3>Something here</h3>
<p id="copythis">Copy this code</p>

<h3>Something here</h3>
<p id="copythisone">Copy this other text</p>

<h3>Something here</h3>
<p id="copythisone">Copy this other text</p>


<script type="text/javascript">
    $(document).ready(function(){
        $('#copythis').click(function(){
            var text = $("#copythis").get(0)
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand('copy');
        })
    });
</script>

优化方案 #

核心修改点 #

仅需要替换一行代码即可解决元素指向问题：将硬编码的目标元素选择器替换为$(this)，自动获取当前触发点击事件的元素本身：

- var text = $("#copythis").get(0)
+ var text = $(this).get(0)

批量绑定事件优化 #

如果有大量需要复制的元素，无需逐个ID绑定事件，可给所有需要支持复制的元素新增一个通用类（例如copyable），直接给该类统一绑定点击事件即可，完整代码如下：

<h3>Something here</h3>
<p class="copyable" id="copythis">Copy this code</p>

<h3>Something here</h3>
<p class="copyable" id="copythisone">Copy this other text</p>

<h3>Something here</h3>
<p class="copyable" id="copythisone">Copy this other text</p>


<script type="text/javascript">
    $(document).ready(function(){
        // 统一绑定所有带copyable类的元素
        $('.copyable').click(function(){
            var text = $(this).get(0)
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand('copy');
        })
    });
</script>

修改后点击任意带copyable类的元素，都会自动复制该元素的文本内容，各元素的复制逻辑完全独立。

内容的提问来源于stack exchange，提问作者Ruan