Question

我有多个按钮，点击后，应该复制特定div中的文本。但是，因为div具有多次在页面上重复的ID（由于处于循环中），所以我无法确保复制的文本来自具有该ID的最近div。

我正在使用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并为每个信息卡填充内容。需要复制功能的表位于该循环内。看起来像这样

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所述：

该值必须在元素的主子树中的所有ID中唯一，并且必须至少包含一个字符。该值不得包含任何空格字符。 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将与页面

1 个答案: