javascript - 如何让我的文案JS监听多个按钮？

Question

如何让 JS 为多个复制按钮工作？例如，想象一个页面提要中的 5 个帖子，每个帖子都有自己的复制按钮。现在它似乎只对页面中的第一个按钮有效，其他按钮什么都不做。

HTML/PHP:

<input type="text" value="<?php the_permalink();?>" id="myInput">

<div class="copytooltip">
<button onclick="myFunction()" onmouseout="outFunc()">
  <span class="copytooltiptext" id="myCopyTooltip">Copy to clipboard</span>
  Copy text
  </button>
</div>

JS:

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  
  var tooltip = document.getElementById("myCopyTooltip");
  tooltip.innerHTML = "Copied: " + copyText.value;
}

function outFunc() {
  var tooltip = document.getElementById("myCopyTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}

Answer 1

使用动态 ID 是可行的方法，但还有另一种更复杂的选择。它涉及使用事件对象。您应该将输入字段和按钮放在同一个父元素下。然后您可以根据事件的目标元素遍历 DOM，为您的按钮和输入字段找到共同的父级，然后在共同父级的子节点中找到输入字段。沿着这些线的东西:

function myFunction(event) {
  const commonParent = event.currentTarget.parentElement;
  let inputElement = null;
  for (node of commonParent.childNodes) {
    if(node instanceof HTMLInputElement) {
        inputElement = node;
      break;
    } 
  }
 
  inputElement.select();
  inputElement.setSelectionRange(0, 99999);
  document.execCommand("copy");
  
  event.currentTarget.innerText = `Copied: ${inputElement.value}`;
}

function outFunc(event) {
    event.currentTarget.innerText = "Copy to clipboard";
}

<div class="post-wrapper">
  <input type="text" value="Value 1" id="myInput">
  <br>
  <button onclick="myFunction(event)" onmouseout="outFunc(event)">
    Copy to clipboard
  </button>
</div>

<div class="post-wrapper">
  <input type="text" value="Value 2" id="myInput">
  <br>
  <button onclick="myFunction(event)" onmouseout="outFunc(event)">
    Copy to clipboard
  </button>
</div>