Question

我有一个php文件，我从db中获取数据，并为此创建了表。有id，标题和url，旁边是按钮，我正尝试通过单击按钮来复制href url，但它仅复制第一行url。

例如，如果我单击第3行复制按钮，它将始终复制url1.com。

HTML部分：

 <table>
     <tr>
       <td>
          <a href="http://url1.com" id="copythis">Url 1</a>
              <button class="copybutton"></button>
       </td>
     </tr>
     <tr>
       <td>
          <a href="http://url2.com" id="copythis">Url 2</a>
              <button class="copybutton"></button>
       </td>
     </tr>
     <tr>
       <td>
          <a href="http://url3.com" id="copythis">Url 3</a>
              <button class="copybutton"></button>
       </td>
     </tr>
   </table>

JS PART：

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>

<script>

 var link = document.getElementById("copythis");
 var href = link && link.href;
 new Clipboard('.copybutton', {

 text: function() {
   return href;
  }
 });

  </script>

Answer 1

您在三个anchor元素上使用了相同的ID。它们都应该有自己的ID。

这是图书馆文件：h2ostream

这是一个有效的解决方案，带有纯javascript和剪贴板。该解决方案使用传递给trigger函数的text来获取上一个同级href上的trigger.previousElementSibling.getAttribute('href')属性：

new Clipboard('.copybutton', {
  text: function(trigger) {
    return trigger.previousElementSibling.getAttribute('href');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>

<table>
   <tr>
     <td>
        <a href="http://url1.com" id="copythis1">Url 1</a>
        <button class="copybutton">Button 1</button>
     </td>
   </tr>
   <tr>
     <td>
        <a href="http://url2.com" id="copythis2">Url 2</a>
        <button class="copybutton">Button 2</button>
     </td>
   </tr>
   <tr>
     <td>
        <a href="http://url3.com" id="copythis3">Url 3</a>
        <button class="copybutton">Button 3</button>
     </td>
   </tr>
</table>

<input type="text" placeholder="Paste here">

复制到表格中的剪贴板href网址

1 个答案: