使用 zclip 通过多个复制按钮复制多个值答案

【问题标题】：using zclip to copy multiple values with multiple copy buttons使用 zclip 通过多个复制按钮复制多个值
【发布时间】：2014-07-31 06:38:45
【问题描述】：

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

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

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

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

代码：

      $(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>

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

【问题讨论】：

确保您至少使用 1.1.0 版本，在此之前，回调函数不支持 $(this) 选择器 (as shown in their bugs section)
@GabyakaG.Petrioli 谢谢回复，我目前使用的是1.1.1版本。它似乎只在第一个按钮上初始化。
如果您发布 Fiddle，我会尽力为您修复。
@GuyT 我创建了一个很好用的小提琴，jsfiddle.net/rK974。我认为可能与我正在使用的排序插件存在冲突，由 kunkalabs 混合。但是没有错误，也没有看似明显的冲突，这就是我现在所处的位置。这有点'不幸。
@samayres1992 我无法打开你的 Fiddle，但我猜你忘记了 .each(jQuery, for 纯 JS)。见我的小提琴：jsfiddle.net/GuyT/27cucr6n。我无法打开您的 Fiddle，但这可能是网站问题，因为我也无法打开其他人（404）。

标签： javascript jquery zclip

【解决方案1】：

我明白你在做什么，但我认为你的语法有点不对。

您将 zclip 像事件而不是指令一样应用。

试试这个

$('.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");
           }
    });
});

更新

$('.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");
           }
    });
});

显然，data-copy-shorturl 属性应该通过 jQuery 的 data function 访问

【讨论】：

感谢您的回复，我已经在 document.ready 内部和外部进行了尝试。仅使用每个功能，它也无法在任何按钮上初始化，在文档就绪功能中，它适用于第一个按钮。也许这是脚本在文档中定位的问题？我目前只是将它放在标记中。这是按钮的控制台返回，它似乎可以返回所有值，cl.ly/image/2q1f2u0x1b3q/…Thoughts?
你应该使用 Ready 事件，其他都不重要...尤其是脚本定位...
我刚刚试了一下，结果是一样的。尽管我确实使用了控制台并使用断点检查了“this”的值。它确实对每个按钮进行了初始化，但是当页面完全加载时，flash 对象不会应用于按钮（除了第一个按钮）。这是一个屏幕截图：cl.ly/image/3e0d3j1F3e1p/… 任何进一步的想法为什么这不起作用？感谢您迄今为止的所有帮助。
我一直在玩它，小提琴工作正常。我想一定有某种冲突。 jsfiddle.net/rK974
@samayres1992，Fiddle 做得很好。现在我不知所措。我会尝试更多的研究。 LMK 如果你想出更多的角度......

【解决方案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");
        }
    });
}

【讨论】：