javascript - 使用 zclip 通过多个复制按钮复制多个值

Question

我希望能够使用附带的复制按钮复制类属性的值。

由于缺乏更好的措辞，这里有一个例子：

目前，复制按钮仅适用于一个复制按钮（以先到者为准）。

如何使用多个按钮从多个元素复制？

代码：

      $(document).ready(function() {
      $('.copylink').zclip({
         path: '/flash/ZeroClipboard.swf',
           copy: function(){ return $(this).attr('data-copy-shorturl'); },
           afterCopy: function()
           {
               console.log($(this).attr('data-copy-shorturl') + " was copied to clipboard");
           }
        });
  }); 

所有按钮都具有相同的类等：

<button class="copyshortened copylink" data-copy-shorturl="http://litl.it/{{$link->short_url}}">copy</button>

我不确定为什么$(this)在 jquery 中，似乎无法正常工作。

Answer 1

I see what you are trying to do, but I think your syntax is a little off.

You are applying zclip like an event rather than as a directive.

Try this

$('.copylink').each(function(){
    $(this).zclip({
        path :  '/flash/ZeroClipboard.swf',
           copy: function(){ return $(this).attr('data-copy-shorturl'); },
           afterCopy: function()
           {
               console.log($(this).attr('data-copy-shorturl') + " was copied to clipboard");
           }
    });
});

---

Update

$('.copylink').each(function(){
    $(this).zclip({
        path :  '/flash/ZeroClipboard.swf',
           copy: function(){ return $(this).attr('data-copy-shorturl'); },
           afterCopy: function()
           {
               console.log($(this).data('copy-shorturl') + " was copied to clipboard");
           }
    });
});

Apparently, the data-copy-shorturl attributes should be accessed via jQuery's data function

Answer 2

似乎对我来说很完美。请检查JS FIDDLE。如果我误解了你的问题，请告诉我。

HTML：

<button class="copyshortened copylink" data-copy-shorturl="http://google.com">copy google link</button>
<button class="copyshortened copylink" data-copy-shorturl="http://yahoo.com">copy yahoo link</button>

jQuery

window.onload = loaded();
function loaded()
{
    $('.copylink').zclip({
        path:'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
        copy: function(){ return $(this).attr('data-copy-shorturl'); },
        afterCopy: function()
        {
            console.log($(this).attr('data-copy-shorturl') + " was copied to clipboard");
        }
    });
}