许多不同的链接复制答案

【问题标题】：Many different links to copy许多不同的链接复制
【发布时间】：2018-05-24 15:37:15
【问题描述】：

var ShortCut = document.querySelector('.Copy_Link');
ShortCut.addEventListener('click', function(event)
{
    var ShortCut = document.querySelector('.Copy_Container');
    ShortCut.focus();
    ShortCut.select();
try
{
    var successful = document.execCommand('copy');
    var msg = successful? 'successful': 'unsuccessful';
    console.log('Copying the shortcut is ' + msg);
}
catch (err)
{
    console.log('Unsuccessful copying.');
}
});

这是一个从隐藏文本区域复制一个链接的脚本。我想在同一页面上有几个单独的链接，但是这个脚本：

var ShortCut = document.querySelectorAll('.Copy_Link1, .Copy_Link2, .Copy_Link3');
ShortCut.addEventListener('click', function(event)
{
    var ShortCut = document.querySelectorAll('.Copy_Container1, .Copy_Container2, .Copy_Container3');
    ShortCut.focus();
    ShortCut.select();
try
{
    var successful = document.execCommand('copy');
    var msg = successful? 'successful': 'unsuccessful';
    console.log('Copying the shortcut is ' + msg);
}
catch (err)
{
    console.log('Unsuccessful copying.');
}
});

失败。

链接：

<SPAN class="Copy_Link1">Copy the shortcut link 1</SPAN>
<TEXTAREA class="Copy_Container1" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 1
</TEXTAREA>

<SPAN class="Copy_Link2">Copy the shortcut link 2</SPAN>
<TEXTAREA class="Copy_Container2" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 2
</TEXTAREA>

<SPAN class="Copy_Link3">Copy the shortcut link 3</SPAN>
<TEXTAREA class="Copy_Container3" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 3
</TEXTAREA>

我希望你明白我想要什么。我什至找不到适用于我的特定情况的类似解决方案，我尝试了几种方法，但只有这一种有效。如果有不清楚的地方，请随时提问。

【问题讨论】：

您可以在跨度上放置一个data-target 来标识要复制的文本区域，并在您的事件处理程序中引用它
如何引用？

标签： jquery clipboard copying

【解决方案1】：

你可以在 span 上放置一个数据元素来告诉它选择哪个 textarea。

$('.Copy_Link').on('click', function(e){
  var target = document.getElementById(this.dataset.target);
  
  target.focus();
  target.select();
  
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying the shortcut is ' + msg);
  } catch (err) {
    console.log('Unsuccessful copying.');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<SPAN class="Copy_Link" data-target="Copy_Container1">Copy the shortcut link 1</SPAN>
<TEXTAREA id="Copy_Container1" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 1
</TEXTAREA>

<SPAN class="Copy_Link" data-target="Copy_Container2">Copy the shortcut link 2</SPAN>
<TEXTAREA id="Copy_Container2" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 2
</TEXTAREA>

<SPAN class="Copy_Link" data-target="Copy_Container3">Copy the shortcut link 3</SPAN>
<TEXTAREA id="Copy_Container3" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 3
</TEXTAREA>

【讨论】：