Question

我正在寻找一种创建动态多重复制按钮的方法，而不必为每个复制按钮创建单独的功能。为此，我搜索了google，但找不到可靠的代码。

看看我想要达到的目标，但是我不知道如何实现，因为我对Jquery有点不满意。

示例：

如您所见，每个跟踪代码都有单独的复制按钮，并且每个跟踪代码都是使用其自己的复制按钮从数据库中动态生成的。我只想找到一种方法来创建单个复制按钮，但不知道如何。

这是到目前为止我已经完成的一个单值复制按钮，此代码段的唯一问题是由于ID只能运行一次，并且我不想为其创建多个ID单个功能。

function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      document.execCommand("copy");
      $temp.remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<span id='c1' ><span style="color:#59c053;">4C3B2</span></span>
 
  <button style="margin-left:5px;float:;" onclick="copyToClipboard('#c1')" type="button" class="btn btn-info btn-xs">Copy</button>
  
  <br>
  <textarea rows="4" cols="25" placeholder="paste it here..."></textarea>
  </body>

Answer 1

如果将每个代码与复制按钮一起放在容器中，则可以使用$（el）.parents（）来获取不带ID的代码。

HTML：

<div class="code-container">
    <span id='c1' class="code"><span style="color:#59c053;">4C3B2</span></span>
    <button style="margin-left:5px;float:;" onclick="copyToClipboard(this)" type="button" class="btn btn-info btn-xs">Copy</button>
</div>
<div class="code-container">
    <span id='c2' class="code"><span style="color:#59c053;">WD36F4</span></span>
    <button style="margin-left:5px;float:;" onclick="copyToClipboard(this)" type="button" class="btn btn-info btn-xs">Copy</button>
</div>
<textarea rows="4" cols="25" placeholder="paste it here..."></textarea>

还有JS（现在是按钮，而不是代码）：

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).parents('.code-container').find('.code span').text()).select();
    document.execCommand("copy");
    $temp.remove();
}

因此，我们基本上是在寻找按钮的父容器，然后在其中寻找代码。

Answer 2

我确定您可以使我的方法更好，但这是使用您的代码的代码：

const trackingCodes = ["4C3B2", "91830", "17253", "2177E", "FER8F"];

window.onload = () => {
  const codesContainer = document.querySelector('.trackingCodeContainer')

  let design = trackingCodes.forEach((code, i) => {
    const newDiv = document.createElement('div');
    newDiv.style = "text-align: center;"
    const newSpan = createSpan(code, i);
    newDiv.appendChild(newSpan);
    newDiv.appendChild(createButton(newSpan.id))
    codesContainer.appendChild(newDiv)
  })
}

createSpan = (code, i) => {
  const newSpan = document.createElement('span');
  newSpan.id = `span${i}`
  newSpan.style = "color: #59c053;";
  newSpan.appendChild(document.createTextNode(code));
  return newSpan;
}

createButton = (spanId) => {
  const newButton = document.createElement('button');
  newButton.style = "margin-left:5px;";
  newButton.addEventListener('click', (e) => {
    const $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(`#${spanId}`).text()).select();
    document.execCommand("copy");
    $temp.remove();
  });
  newButton.appendChild(document.createTextNode("Copy"));
  return newButton;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="trackingCodeContainer" style="width: 100%"></div>
<br>
<textarea rows="4" cols="25" placeholder="paste it here..."></textarea>

如何使用jQuery创建动态复制按钮？

2 个答案: