clipboard.js 其中所需的复制文本 div 将与页面上的其他 div 具有相同的 class 或 ID

Question

我有多个按钮，单击这些按钮时，应该从特定 div 复制文本。但是，因为 divs 的 ID 在页面上重复了几次（由于处于循环中），我无法确保复制的文本来自最近的 div那个ID。

我正在使用 Clipboard.js，但如果我可以使用普通功能获得相同的功能，则不是必需的。

我的 HTML 代码到目前为止看起来像这样...但请记住，它是在一个动态生成的循环中。所以 "shortcodesTable" 和每个 "shortcode1" div 将被重复。

<div id="shortcodesTable">
    <h4>Short Codes</h4>
        <div>
            <h5>Shortcode 1</h5>
            <button class="copy-btn" data-clipboard-target="#shortcode1">Copy</button>
            <div id="shortcode1"><pre><code> ... ... ... </code></pre></div>
        </div>
        <div>
            <h5>Shortcode 2</h5>
            <button class="copy-btn" data-clipboard-target="#shortcode2">Copy</button>
            <div id="shortcode2"><pre><code> ... ... ... </code></pre></div>
        </div>

我的 JS 是 clipboard.js 文档中的基本函数：

var clipboard = new Clipboard('.copy-btn');

clipboard.on('success', function(e) {
        console.info('Copied Text:', e.text);

        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

为进一步说明，我的代码循环遍历 api 信用卡并为每张信用卡填充内容。这个需要复制功能的 table 在那个循环中。看起来像这样

for (var i = 0; i < arrayLength; i++) {
    var 1 = blah;
    var 2 = blah2;

    $('<div>'+
        '<div>'+
           var 1 +
        '</div>' +
        '<div>'+
           var 2 +
        '</div>' +
        '<div id="shortcodesTable">'+
           '<h4>Short Codes</h4>'+
           '<div>'+
              '<h5>Shortcode 1</h5>'+
              '<button class="copy-btn" data-clipboard-target="#shortcode1">Copy</button>'+
              '<div id="shortcode1"><pre><code> ... ... ... </code></pre></div>'+
           '</div>'+
           '<div>'+
              '<h5>Shortcode 2</h5>'+
              '<button class="copy-btn" data-clipboard-target="#shortcode2">Copy</button>'+
              '<div id="shortcode2"><pre><code> ... ... ... </code></pre></div>'+
           '</div>'+
        '</div>'+
      '</div>').appendTo('.some-div');
}

Answer 1

您可以使用计数器变量或简单地使用循环索引来为您的元素提供唯一 ID。

正如 W3 所述：

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters. https://www.w3.org/TR/html5/dom.html#the-id-attribute

使用模板字符串的工作示例

function createShortcodeTables(iterations, root) {
  let html = ''
  for (let i = 0; i < iterations; i++) {
    html += `
      <div id="shortcodesTable-${i}">
      <h4>Short Codes</h4>
      <div>
        <h5>Shortcode 1</h5>
        <button class="copy-btn" data-clipboard-target="#shortcode-${i}">Copy</button>
        <div id="shortcode-${i}"><pre><code> Text of shortcode #${i} </code></pre></div>
      </div>
      <div>
        <h5>Shortcode 2</h5>
        <button class="copy-btn" data-clipboard-target="#shortcode-${i}-${i}">Copy</button>
        <div id="shortcode-${i}-${i}"><pre><code> Text of shortcode #${i}-${i} </code></pre></div>
      </div>
    </div>
    `
  }
  root.innerHTML = html
}

const rootElement = document.querySelector('.root')

createShortcodeTables(10, rootElement)

const clipboard = new Clipboard('.copy-btn');

clipboard.on('success', function(e) {
  console.info('Copied Text:', e.text);

  e.clearSelection();
});

clipboard.on('error', function(e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});

Example on JSFiddle

编辑：

... +
'<button class="copy-btn" data-clipboard-target="#shortcode1">Copy</button>' +
'<div id="shortcode1"><pre><code> ... ... ... </code></pre></div>' + ...

在您的 data-clipboard-target 和相应的 id 属性中，您必须添加索引变量 i 。为此，您必须关闭字符串并将索引变量连接到它，否则它会向您打印文字字符 i.

... +
'<button class="copy-btn" data-clipboard-target="#shortcode-' + i + '">Copy</button>' +
'<div id="shortcode-' + i + '"><pre><code> ... ... ... </code></pre></div>' + ...

请注意我在您的 HTML 属性中添加的单引号以关闭字符串文字。

更多概念性示例：

var arr = [1, 2, 3, 4, 5];
for (var index = 0; index < arr.length; index++) {
  console.log('<div id="some-id-' + index + '"></div>');
}

使用字符串连接JSFiddle。

clipboard.js 其中所需的复制文本 div 将与页面上的其他 div 具有相同的 class 或 ID

clipboard.js where the desired copied text div will have same class or id as other divs on page

html

javascript

jquery

copy-paste

clipboard.js