复制剪贴板 - clipboard.js - 基于所选图标的文本 - 不工作

时间:2017-12-20 11:00:12

标签: jquery clipboard.js

我使用Clipboard.js根据点击的硬币图标复制硬币钱包地址但不起作用

花了3天时间

HEAD

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

BODY

    <script>
    $(document).on('click', 'a#donate', function(){
    // get month
    var val = $(this).data('id');
    if(val == 'BTC'){ var img = 'btc.png'; var coin='btc'; var name='Bitcoin'; var address='BTC ADDRESS'; var qrcode='btcqr.png';}
    if(val == 'ETH'){ var img = 'eth.png';var coin='eth';var name='Ethereum';var address='ETH ADDRESS'; var qrcode='ethqr.png'}
    if(val == 'XRP'){ var img = 'xrp.png';var coin='xrp';var name='Ripple';var address='XRP ADDRESS'; var qrcode='xrpqr.png'}
    if(val == 'LTC'){ var img = 'litecoin.png';var coin='ltc';var name='Litecoin';var address='LTC ADDRESS'; var qrcode='ltcqr.png'}
    $("#donatecoinicon").attr('src',img);
    $("#donatecoin").attr('value',coin);
    $("#address").attr('value',address);
    $("#donatecopy").attr('data-clipboard-text',address);
    $("#qrcode").attr('src',qrcode);
    $("#donatecoinname").html(name);
    });
</script>

每枚硬币都有不同的图像,这里以一个为例 启动模态并根据选择的图像显示上述var值的信息

<a href="#" id="donate" data-id="BTC" data-toggle="modal" data-target="#donatemodal" ><img src="btc.png" class="center-block img-responsive" style="height:40px"></a>

模态代码 带有地址的输入和要复制的按钮

 <div class="col-xs-2 pull-left text-center" style="text-align:center;">
  <img src="" id="donatecoinicon" height="40" class="center-block" >
  </div>
  <div class="col-xs-10 pull-right">

            <div class="input-group">
              <input id="address"  readonly type="text" style="width:100%;text-align:center">
              <button class="btn"  id="donatecopy">COPY</button>
              QR Code : <br>
      <img src="" class="img-responsive" id="qrcode" style="height:100px; width:100px"><br>          
            </div>

    </div>

正确显示所有数据,只显示无效的副本

0 个答案:

没有答案