如何让 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";
}
最佳答案
使用动态 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>
关于javascript - 如何让我的文案JS监听多个按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65712235/