对于具有相同 class 的无限元素，如何将无限数量的副本复制到剪贴板？

Question

我的HTML:

   <Div Class='POSTS'>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text1</Div>
    </Div>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text2</Div>
    </Div>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text3</Div>
    </Div>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text4</Div>
    </Div>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text5</Div>
    </Div>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text6</Div>
    </Div>
</Div>

它继续没有任何限制...（永无止境）每个元素内有不同的文本 Class 的“CONTENT”。

我搜索了这个网站并找到了这个：

但是在我工作的项目中，我无法在每个元素上指定 ID，正如您所知，这些元素的数量是无限的：

<Div Class='POST'>
        <Div Class='CONTENT'>some text</Div>
    </Div>

所以需要自动添加

我想：当用户单击带有“CONTENT”Class 的元素内的文本时（无论文本有多长以及它有什么内容），整个文本和标签以及...将被复制到 Clipbored。

我不想设置按钮！我想做一个整体

标签，文本，和.... 可以无限制地复制到每一个上！通过点击它自己的文本。（把它想象成一个文本区域，用户点击它里面的文本，js 复制所有的文本，但是这个是 div，里面有文本）

如果您认为我遗漏了某事并且不够清楚请告诉我！

提前致谢！

Answer 1

这应该可以解决您的问题。首先 select 整个对象，然后获取被点击的元素。复制内容。

var posts = document.querySelector(".POSTS"); 

posts
  .addEventListener("click", function (e) {
    console.log("index", e.target);
    navigator.clipboard.writeText(e.target.innerText).then(
      function () {
        console.log("Async: Copying to clipboard was successful!");
      },
      function (err) {
        console.error("Async: Could not copy text: ", err);
      }
    );
  });

对于具有相同 class 的无限元素，如何将无限数量的副本复制到剪贴板？

How to have infinite number of copy to clipboard for infinite elements that have same class?

html

javascript

clipboard

jquery

copy