Javascript动态变量为$.each语句

Javascript dynamic varible in $.each statement

本文关键字：each 语句 动态 变量 Javascript      更新时间：2023-09-26

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

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

我创建了一个属性，该属性包含描述.itemDescriptionContainer

当前代码-我尝试过（但没有工作）

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!";
        });
    });

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

$(".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!";
      });
   });
});
相关文章：