多個zeroclipboard按鈕

Question

難以讓zeroclipboard使用多個按鈕。我得到它與一個（第一個）工作，但我認爲我的代碼過於複雜。

HTML：

<ul id="keylist" class="vertical-list list-parent"> 
    <li id="license_key_0"> 
     <div class="primary two-quarter unit-link"> 
     <img width="70" height="70" class="list-image media" src="/images/license-key.png"> 
     <dl class="meta"> 
      <dt>Auth Key</dt> 
      <dd>313f7f5586b39cd9bf7a894894564036</dd> 
      <dt>URL</dt> 
      <dd> 
      <span id="fe_text_0"> 
      http://localhost:3000/projects/313f7f5586b39cd9bf7a894894564036 
      </span> 

      <div style="position:relative" id="d_clip_container"> 
      <button title="Click me to copy to clipboard." class="my_clip_button" id="d_clip_button"><b>Copy To Clipboard...</b></button> 
     </div> 
      </dd> 
      <dt>Expires</dt> 
      <dd>Never</dd> 
     </dl> 
     </div> 

    </li> 
    <li id="license_key_1"> 
    <div class="primary two-quarter unit-link"> 
    <img width="70" height="70" class="list-image media" src="/images/license-key.png"> 
    <dl class="meta"> 

     <dt>Auth Key</dt> 
     <dd>287a990d17b680fe410329cb95af89b9</dd> 
     <dt>URL</dt> 
     <dd> 
     <span id="fe_text_1"> 
      http://localhost:3000/projects/287a990d17b680fe410329cb95af89b9 
     </span> 
     <div style="position:relative" id="d_clip_container"> 
      <button title="Click me to copy to clipboard." class="my_clip_button" id="d_clip_button"><b>Copy To Clipboard...</b></button> 
     </div> 
     </dd> 
     <dt>Expires</dt> 
     <dd>2012-11-16 23:39:00 -0500</dd> 
    </dl> 
    </div> 
</li><li id="license_key_2"> 
    <div class="primary two-quarter unit-link"> 
    <img width="70" height="70" class="list-image media" src="/images/license-key.png"> 
    <dl class="meta"> 

     <dt>Auth Key</dt> 
     <dd>ff381cdb94070e1903c5f6fddc31b148</dd> 
     <dt>URL</dt> 
     <dd> 
     <span id="fe_text_2"> 
      http://localhost:3000/projects/ff381cdb94070e1903c5f6fddc31b148 
     </span> 
     <div style="position:relative" id="d_clip_container"> 
      <button title="Click me to copy to clipboard." class="my_clip_button" id="d_clip_button"><b>Copy To Clipboard...</b></button> 
     </div> 
     </dd> 
     <dt>Expires</dt> 
     <dd>2013-11-28 23:45:00 -0500</dd> 
    </dl> 
    </div> 
</li> 
    </ul> 

Zeroclipboard JS：

$j(document).ready(function() { 

    var myDiv = document.getElementById("keylist"); 
    var displayNum = 0; 
    var nodes = myDiv.getElementsByTagName("span"); 
    for (var index = 0; index < nodes.length; index++) { 
     var node = nodes[index]; 
     if (node.id.indexOf("fe_text_") == 0) { 
      node.id = "fe_text_" + displayNum; 

      var clip = new ZeroClipboard.Client(); 
      ZeroClipboard.setMoviePath("/javascripts/ZeroClipboard.swf") 
      clip.setHandCursor(true); 

      code = $j("#" + node.id).html(); 
      clip.glue('d_clip_button'); 
      clip.addEventListener('mouseDown', function (client) { 
       clip.setText(code); 
      }); 

      //Add a complete event to let the user know the text was copied 
      clip.addEventListener('complete', function (client, text) { 
       alert("Copied text to clipboard: " + code); 
      }); 
      displayNum++; 
     } 
    } 
}); 

Answer 1

的id只能使用一次。您的HTML包含使用相同id即<button ... id="d_clip_button"><b>Copy To Clipboard...</b></button>的多個元素。

因此，您的代碼會繼續將ZeroClipboard應用於每個循環上具有該ID的第一個元素。

DEMO - 這是重寫你的代碼。

確保您在代碼中將SWF路徑設置回/javascripts/ZeroClipboard.swf。