如何从一组具有相同 class/id in javascript 的元素中定位特定元素？

Question

我想使用 JavaScript 复制 <li> 标签中的文本。单击 <li> 标记时应复制它。所有 <li> 标签都具有相同的 class，因为它们将通过 CSS 获得相同的格式。

根据我的研究，我们需要为按钮指定一个目标 class，它将复制到剪贴板（使用 clipboard.js）。 <li> 标签将通过 js 生成，因此，为每个标签赋予不同的 id 将很困难，并且会增加代码并降低速度。

那么如何通过js/jquery/clipboard.js等方式复制被点击的li标签的文本

<ul>
    <li class="data">Lorem ipdolor.</li>
    <li class="data">Lo ripsum dolor.</li>
    <li class="data">Lorepsum dor.</li>
</ul>

Answer 1

有不同的方法，但有两种方法最重要。

$(function() {
  $("li[class='data']").click(function(e) {
    // 1) Use this reference
    console.log("1: " + $(this).text());
    // 2) Use Event Target
    console.log("2: " + $(e.target).text());
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="data">Lorem ipdolor.</li>
  <li class="data">Lo ripsum dolor.</li>
  <li class="data">Lorepsum dor.</li>
</ul>

Answer 2

你可以在ul上放一个id:

<ul id="dataContainer">
        <li class="data">sometext</li>
        <li class="data">sometext1</li>
        <li class="data">sometext2</li>
        <li class="data">sometext3</li>
</ul>

然后：

document.getElementById('dataContainer').addEventListener('click', function(e){
  console.log(e.target.innerText);
});

如何从一组具有相同 class/id in javascript 的元素中定位特定元素？

How to target a specific element from a group of them having the same class/id in javascript?

html

javascript

css

jquery

clipboard.js