如何使用clipboard.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>

有什么想法吗？

谢谢你

- paul

---

你说的“不能让它工作”是什么意思？有出现任何错误吗？如果你点击它会发生什么？ - tung

阅读文档，构造函数是：ClipboardJS而不是Clipboard...也许这就是你的问题？ - Amr Noman

Answer 1

尝试这个：

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>  

- Amr Noman

---

谢谢，它可以工作，但是如果使用简单的JavaScript而不是jQuery呢？new ClipboardJS（'.btn'，{ target：function（trigger）{ return trigger.getAttribute（'href'）; } }）; - paul

Answer 2

getAttribute 是一个原生的 DOM 方法，你不能直接应用于 jQuery 封装的元素上。你需要将原生的 DOM 元素取出来，或者使用 jQuery 的 attr() 方法来获取 href 的值：

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

- 31piy