Jquery 與 ClipboardJS 最接近

Question

我用 ClipboardJS 做了一個簡單的優惠券剪。 我的目的是當用戶單擊優惠券按鈕時對其進行剪輯（復制）。 Coupon 將顯示字符串 Copied，然后返回顯示原始 Coupon。

不幸的是，如果同一頁面上有兩個或多個優惠券，則返回的值將始終是第一個優惠券。 我試圖玩弄最接近的 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>

JSF中：

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

Answer 1

e.trigger返回您單擊的元素。 因此，您可以使用它來獲取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')這將始終首先返回，您必須考慮您對哪個元素執行的操作。 在你的情況下它會是一樣的，所以你可以直接e.trigger返回你點擊的按鈕。