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

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

我的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,里面有文本)

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

提前致谢!

这应该可以解决您的问题。 首先 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);
      }
    );
  });