如何使用Clipboard.js获取href属性？点击按钮失效问题求助

我来帮你梳理下问题所在，你的代码里有两个关键错误导致拿不到正确的href：

• 找错了目标元素：你当前是在获取触发按钮（.btn）的href，但按钮本身根本没有这个属性呀！我们要拿的是data-clipboard-target指向的那个<a>标签的href。
• jQuery对象与原生DOM方法混用：$(trigger)是jQuery包装后的对象，它没有getAttribute这个原生方法，得用jQuery的.attr()方法，或者把jQuery对象转成原生DOM元素再调用getAttribute。

给你两种修正后的代码方案，选哪种都可以：

方案一：原生JS实现 #

<!-- Target --> 
<a href='https://clipboardjs.com/' id='foo'>Clipboard.js</a>
<!-- Trigger --> 
<button class='btn' data-clipboard-target='#foo'> Copy to clipboard </button>
<script type="text/javascript">
new Clipboard(".btn", {
  text: function(trigger) {
    // 从按钮上拿到目标元素的选择器
    const targetSelector = trigger.getAttribute('data-clipboard-target');
    // 找到目标a标签
    const targetLink = document.querySelector(targetSelector);
    // 返回它的href属性值
    return targetLink.getAttribute('href');
  }
});
</script>

方案二：jQuery实现 #

如果你习惯用jQuery，也可以这么写：

<!-- Target --> 
<a href='https://clipboardjs.com/' id='foo'>Clipboard.js</a>
<!-- Trigger --> 
<button class='btn' data-clipboard-target='#foo'> Copy to clipboard </button>
<script type="text/javascript">
new Clipboard(".btn", {
  text: function(trigger) {
    // 用jQuery获取目标选择器
    const targetSelector = $(trigger).attr('data-clipboard-target');
    // 找到目标a标签并获取它的href
    return $(targetSelector).attr('href');
  }
});
</script>

核心逻辑很简单：先通过触发按钮的data-clipboard-target属性找到真正要复制的目标元素，再从目标元素上取href值，这样就能正常复制链接啦～

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