Question

我有一个项目目录，这些项目都通过 循环显示 所有项目都有描述，可以使用 ZeroClipboard复制 插件。

我需要让下面的代码为每个 .itemDescriptionContainer 创建一个客户端。所以我复制了正确的数据。

我使用包含描述 .itemDescriptionContainer

的项目的ID创建了一个属性

当前代码 - 我尝试过（而不是正常工作）

HTML

//While Loop
<div class="itemDescriptionContainer">
    <div id="copy-button" data-clipboard-target="copyDescription">Copy Description<div>
    <div id="copyDescription">
</div>
//endwhile

的Javascript

$(".itemDescriptionContainer").each(function(index){
    var client = new ZeroClipboard( document.getElementById("copy-button") );

    client.on("ready", function(readyEvent) {
        client.on("aftercopy", function(event) {
            event.target.innerHTML = "Description Copied!";
        });
    });
});

*以下代码有点工作，它只复制whileloop中第一项的描述

HTML

//While Loop
<div class="itemDescriptionContainer" data-itemID="{{{$item->id}}}">
    <div id="copy-button-{{{$item->id}}}" data-clipboard-target="copyDescription-{{{$item->id}}}">Copy Description<div>
    <div id="copyDescription-{{{$item->id}}}">
</div>
//endwhile

的Javascript

    var itemID = $(this).attr('data-itemID');
    // Attach itemID to client somehow to make a client instance unique.

    var client = new ZeroClipboard( document.getElementById("copy-button") );

    client.on("ready", function(readyEvent) {
        client.on("aftercopy", function(event) {
            event.target.innerHTML = "Description Copied!";
        });
    });

Answer 1

我通过使用窗口函数解决了这个问题，我希望有些人能发现它很有用。

$(".itemDescriptionContainer").each(function(){
   var itemID = $(this).attr('data-itemID');

   // Copy Item Description
   var dynamic = window["client" + itemID] = new ZeroClipboard(document.getElementById("copy-button-"+itemID));

   dynamic.on("ready", function(readyEvent){
      dynamic.on("aftercopy", function(event){
         event.target.innerHTML = "Description copied!";
      });
   });

});

$ .each语句中的Javascript动态变量

1 个答案: