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

190

26 марта 2022, 11:20

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

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:matt@example.co.uk">34matt@example.co.uk</a></p> 
<p><button class="js-emailcopybtn">COPY</button></p> 
<p>Email me at <a class="js-emaillink" href="23mailto:matt@example.co.uk">23matt@example.co.uk</a></p> 
<p><button class="js-emailcopybtn">COPY</button></p> 
<p>Email me at <a class="js-emaillink" href="1mailto:matt@example.co.uk">1matt@example.co.uk</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:matt@example.co.uk">34matt@example.co.uk</a></p> 
<p><button class="js-emailcopybtn">COPY</button></p> 
<p>Email me at <a class="js-emaillink" href="23mailto:matt@example.co.uk">23matt@example.co.uk</a></p> 
<p><button class="js-emailcopybtn">COPY</button></p> 
<p>Email me at <a class="js-emaillink" href="1mailto:matt@example.co.uk">1matt@example.co.uk</a></p> 
<p><button class="js-emailcopybtn">COPY</button></p>