
在动态生成的内容中,实现点击按钮复制特定行内容到剪贴板的功能,关键在于确保每个按钮和其对应的文本元素都有唯一的标识符。当使用循环生成多个包含复制功能的行时,如果所有按钮都指向同一个 ID,点击任何按钮都只会复制第一个元素的内容。以下将详细介绍如何通过 PHP 生成唯一的 ID,并修改 JavaScript 代码以实现正确的功能。
为每个元素生成唯一 ID
在使用循环生成内容时,可以通过一个计数器变量来为每个元素生成唯一的 ID。首先,在循环外部初始化计数器:
然后在循环内部,将计数器变量嵌入到 HTML 元素的 ID 中:
最后,在循环结束前,递增计数器:
这样,每次循环都会生成一个不同的 ID,例如 demo0、demo1、demo2 等,确保每个段落和按钮都有唯一的标识。
修改 JavaScript 函数
原来的 JavaScript 函数 copy 接收一个元素 ID 作为参数,并尝试复制该元素的内容。现在,由于每个元素都有唯一的 ID,我们需要确保函数能够正确地选择对应的元素。
function copy(element_id) {
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}这个函数通过 document.getElementById(element_id) 来获取指定 ID 的元素,并将其内容复制到剪贴板。由于每个元素现在都有唯一的 ID,因此函数能够正确地复制对应行的内容。
完整示例代码
下面是一个完整的示例代码,展示了如何使用 PHP 生成唯一的 ID,并结合 JavaScript 函数实现点击按钮复制特定行内容的功能:
Search again










