如何使用剪贴板.js获取href属性？

Question

我试图在单击按钮后获取href属性，但无法使其工作。

我的代码：

    <!-- Target -->
    <a href='https://clipboardjs.com/' id='foo'/>

 <!-- Trigger -->  
<button class='btn' data-clipboard-target='#foo'>
    Copy to clipboard
</button>  

<script type="text/javascript">
        new Clipboard(".btn", {
          text: function(trigger) {
            return $(trigger).getAttribute("href");
          }
        });
</script>

有任何想法吗？

谢谢

Answer 1

getAttribute是一个本机DOM方法，您不能直接将其应用于jQuery包装的元素。 您需要获取本机DOM元素，或者使用jQuery的attr()方法来获取href的值：

$(trigger)[0].getAttribute("href");
// OR
$(trigger).attr("href");

Answer 2

尝试这个：

 new ClipboardJS(".btn", { text: function(trigger) { const query = trigger.getAttribute('data-clipboard-target'); const target = document.querySelector(query); return target.getAttribute('href'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> <!-- Target --> <a href='https://clipboardjs.com/' id='foo'></a> <!-- Trigger --> <button class='btn' data-clipboard-target='#foo'> Copy to clipboard </button>