javascript-多个zeroclipboard按钮

很难让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++;
        }
    }
});

解决方法:

一个ID只能使用一次.您的HTML包含使用相同ID的多个元素,即< button ... id =“ d_clip_button”>< b>复制到剪贴板…< / b>< / button>.

结果,您的代码会在每个循环中始终将ZeroClipboard应用于具有该ID的第一个元素.

DEMO —这是您的代码的重写.

确保在代码中将SWF路径设置回/javascripts/ZeroClipboard.swf.