Jquery 与 ClipboardJS 最接近

Question

我用 ClipboardJS 制作了一个简单的优惠券剪辑器。我的目的是当用户点击 Coupon 按钮时剪辑它（复制）。优惠券将显示复制的字符串，然后 return 稍后显示原始优惠券。

遗憾的是，如果同一页面上有两张或更多优惠券，returned 值将始终是第一张优惠券。我试着玩弄 jQuery 最近的，但我想不通。

这是我的代码：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<p>
Clip Coupon <button class="coupon_clipper" data-clipboard-text="10PERCENT">10PERCENT</button> to receive 10% discount for order over 100$
</p>
<p>
Clip Coupon <button class="coupon_clipper" data-clipboard-text="1PERCENT">1PERCENT</button> to receive 1% discount for order over 100$
</p>

<style>
.coupon_clipper {
  border-style: dashed;
}
</style>

Javascript

<script>var cClip = new ClipboardJS('.coupon_clipper');

cClip.on('success', function(e) {
  $(e.trigger).text('Clipped');
  e.clearSelection();
  setTimeout(function() {
    $(e.trigger).text($('.coupon_clipper').closest('.coupon_clipper').attr('data-clipboard-text'));
  }, 250);
});
</script>

JSFiddle:

https://jsfiddle.net/whitecrown/tckd1820/3/

Answer 1

e.trigger return 您点击的元素。因此，您可以使用它来获取 attribute 以及设置文本。

通知

let button = e.trigger;
setTimeout(function() {
  $(button).text($(button).attr('data-clipboard-text'));
}, 250);

var cClip = new ClipboardJS('.coupon_clipper');

cClip.on('success', function(e) {
  let button = e.trigger;
  e.clearSelection();
  
  $(button).text('Clipped');  
  setTimeout(function() {
    $(button).text($(button).attr('data-clipboard-text'));
  }, 250);
});

.coupon_clipper {
  border-style: dashed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<p>
Clip Coupon <button class="coupon_clipper" data-clipboard-text="10PERCENT">10PERCENT</button> to receive 10% discount for order over 100$
</p>
<p>
Clip Coupon <button class="coupon_clipper" data-clipboard-text="1PERCENT">1PERCENT</button> to receive 1% discount for order over 100$
</p>

$('.coupon_clipper').closest('.coupon_clipper') 这将 return 总是首先，你必须考虑你对哪个元素执行的操作。在您的情况下，它将是相同的，因此您可以直接 e.trigger 哪个 return 是您单击的按钮。

Jquery 与 ClipboardJS 最接近

Jquery closest with ClipboardJS

javascript

jquery

clipboard.js

HTML

Javascript

JSFiddle: