问题描述
您好,我是 javascript 新手,但我尽我所能编写了一个 javascript 来复制 <p></p>
元素内的文本。我已经完全编写了代码,但我的问题是我必须重复创建跨度元素。所以任何人都可以帮助我。我的 JavaScript
document.addEventListener('DOMContentLoaded',()=>{
const createtextBox=function(text){
let el=document.createElement('textarea');
el.style.position = 'fixed';
el.style.left = '0';
el.style.top = '0';
el.style.opacity = '0';
el.value = text;
document.body.appendChild(el);
return el;
};
const shortmessage=function(e,m,t){
let span=e.parentNode.querySelector( 'span' );
span.innerText=m;
setTimeout(()=>{span.innerText=''},700 * t)
span.classList.add("copystatusalert");
setTimeout(function() {span.classList.remove("copystatusalert")},700);
};
const copytoclipboard=function(e){
// create the hidden textarea and add the text from the sibling element
let n=createtextBox( this.parentNode.querySelector('p').innerHTML );
n.focus();
n.select();
document.execCommand('copy');
document.body.removeChild(n);
// flash a message in the SPAN-clear after 2s
shortmessage( this,'copied!',0.7 );
};
/*
Find a reference to ALL buttons that are used to copy
text from a sibling element and assign an event handler
to process every button click.
*/
document.querySelectorAll('button.copystatus').forEach( bttn=>{
bttn.addEventListener( 'click',copytoclipboard )
});
})
我的html
<div class='englishstatus'>
<div class='car'>
<div class='latestatus'>
<p>Life is good when you have books</p>
<button class='copystatus btn'>copy</button>
<span></span>
</div>
<div class='latestatus'>
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<button class='copystatus btn'>copy</button>
<span></span>
</div>
</div>
<div class='car'>
<div class='latestatus'>
<p>Cats are better than dogs.</p>
<button class='copystatus btn'>copy</button>
<span></span>
</div>
<div class='latestatus'>
<p>ferrets are better than rats</p>
<button class='copystatus btn'>copy</button>
<span></span>
</div>
</div>
</div>
如您所见,我需要重复创建 span 元素,所以任何人都可以帮助我,以便它可以创建自己的 span 元素。提前谢谢你。
解决方法
我已经修改了您的 JS 代码,并通过动态添加 span 元素将其置于直线上。您可以重构它,根据需要将代码片段分成不同的功能。我只是想在这里直接说明实现逻辑。
const buttons = document.querySelectorAll('.copystatus.btn');
buttons.forEach((btn) => {
btn.addEventListener('click',(e) => {
const quote = e.target.previousElementSibling.innerText;
const copyText = document.createElement('textarea');
copyText.value = quote;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
const span = document.createElement('span');
span.textContent = 'copied';
e.target.parentElement.appendChild(span);
setTimeout(()=> {
span.remove();
},700)
})
})
<div class='englishstatus'>
<div class='car'>
<div class='latestatus'>
<p>Life is good when you have books</p>
<button class='copystatus btn'>Copy</button>
</div>
<div class='latestatus'>
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<button class='copystatus btn'>Copy</button>
</div>
</div>
<div class='car'>
<div class='latestatus'>
<p>Cats are better than dogs.</p>
<button class='copystatus btn'>Copy</button>
</div>
<div class='latestatus'>
<p>Ferrets are better than rats</p>
<button class='copystatus btn'>Copy</button>
</div>
</div>
</div>