javascript - 多个零剪贴板按钮

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>

零剪贴板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在您的代码中。