Как применить действие кнопки по очереди к каждой строке с одинаковыми классами?

Question

при нажатии кнопки нужно чт бы копировался майл под которым она находится.Сейчас все копи рую первое значение

var copyEmailBtn = document.querySelector(".js-emailcopybtn");
copyEmailBtn.addEventListener("click", function(event) {
  // Выборка ссылки с электронной почтой
  var emailLink = document.querySelector(".js-emaillink");
  var range = document.createRange();
  range.selectNode(emailLink);
  window.getSelection().addRange(range);

  try {
    // Теперь, когда мы выбрали текст ссылки, выполним команду копирования
    var successful = document.execCommand("copy");
    var msg = successful ? "successful" : "unsuccessful";
    console.log("Copy email command was " + msg);
  } catch (err) {
    console.log("Oops, unable to copy");
  }

  // Снятие выделения - ВНИМАНИЕ: вы должны использовать
  // removeRange(range) когда это возможно
  window.getSelection().removeAllRanges();
});

<p>Email me at <a class="js-emaillink" href="34mailto:[email protected]">[email protected]</a></p>
<p><button class="js-emailcopybtn">COPY</button></p>
<p>Email me at <a class="js-emaillink" href="23mailto:[email protected]">[email protected]</a></p>
<p><button class="js-emailcopybtn">COPY</button></p>
<p>Email me at <a class="js-emaillink" href="1mailto:[email protected]">[email protected]</a></p>
<p><button class="js-emailcopybtn">COPY</button></p>

Answer 1

Вам необходимо использовать не querySelector, так как он выбирает один элемент(самый первый найденный), а querySelectorAll (он ищет все элементы)
Далее через перебор получать значение по индексу.
Этот пример будет прекрасно работать, если и поля email и кнопки идут по порядку друг за другом.

    var copyEmailBtns = document.querySelectorAll('.js-emailcopybtn'); // Получаем все элементы с классом 
    var emailLinks = document.querySelectorAll(".js-emaillink");// Получаем все элементы с классом 


    for (let i = 0; i < copyEmailBtns.length; i++){ // Для каждого значения
        copyEmailBtns[i].addEventListener("click", function() { // К copyEmailBtns добавляем индекс [i]
            var range = document.createRange();
            range.selectNode(emailLinks[i]); // Добавляем индекс [i]
            window.getSelection().addRange(range);

            try {
                // Теперь, когда мы выбрали текст ссылки, выполним команду копирования
                var successful = document.execCommand("copy");
                var msg = successful ? "successful" : "unsuccessful";
                console.log("Copy email command was " + msg);
            } catch (err) {
                console.log("Oops, unable to copy");
            }

            // Снятие выделения - ВНИМАНИЕ: вы должны использовать
            // removeRange(range) когда это возможно
            window.getSelection().removeAllRanges();
            console.log()
        });
    }

<p>Email me at <a class="js-emaillink" href="34mailto:[email protected]">[email protected]</a></p>
<p><button class="js-emailcopybtn">COPY</button></p>
<p>Email me at <a class="js-emaillink" href="23mailto:[email protected]">[email protected]</a></p>
<p><button class="js-emailcopybtn">COPY</button></p>
<p>Email me at <a class="js-emaillink" href="1mailto:[email protected]">[email protected]</a></p>
<p><button class="js-emailcopybtn">COPY</button></p>

БЛОГ НА HUSL

Как применить действие кнопки по очереди к каждой строке с одинаковыми классами?

Ответы (1 шт):