Как настроить целевой элемент c из группы, имеющей одинаковый класс / идентификатор в javascript? - PullRequest
Новая
       81

Как настроить целевой элемент c из группы, имеющей одинаковый класс / идентификатор в javascript?

0 голосов
/ 02 апреля 2020

Я хочу скопировать текст в тег <li>, используя JavaScript. Его следует скопировать при нажатии на тег <li>. Все теги <li> имеют одинаковый класс, поскольку они получают одинаковое форматирование через CSS.

Согласно моему исследованию, нам нужно указать кнопке цель class, которую она будет копировать в буфер обмена (используя clipboard.js). Тег <li> будет сгенерирован с помощью js, поэтому присвоить каждому из них разные значения id будет сложно, что приведет к увеличению кода и снижению скорости.

Так как же можно скопировать текст тега li, который нажимается через js/jquery/clipboard.js et c. 

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

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

Вы можете поставить id на ul: 

<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);
});
0 голосов
/ 02 апреля 2020

Существуют разные методы, но два стоят на вершине. 

$(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>
...