时间戳

首页 > 解决方案 > 如何为多个按钮创建复制警报？

javascript - 如何为多个按钮创建复制警报？

问题描述

嘿，我是 java 脚本的新手，但是我尽了最大的努力编写了一个 javascript 来复制其中的文本<p></p>但是需要在单击“复制”按钮时显示一个警报文本。主要是我有很多按钮。我的javascript

function copyToClipboard(var1){
  let val = document.getElementById(var1).innerHTML;
  const selBox = document.createElement('textarea');
  selBox.style.position = 'fixed';
  selBox.style.left = '0';
  selBox.style.top = '0';
  selBox.style.opacity = '0';
  selBox.value = val;
  document.body.appendChild(selBox);
  selBox.focus();
  selBox.select();
  document.execCommand('copy');
  document.body.removeChild(selBox);
}

我的html

<div class="englishstatus">
       <div class="car">
    <div class="latestatus">
     <p id="p9">life os good when hou have books</p> 
     <button class="copystatus btn" onclick="copyToClipboard('p9')">Copy</button>
       <span class="copystatusalert">Copied!</span>
    </div>
    <div class="latestatus">
     <p id="p10">Google is a open source library. It is a open source by lary page and sergy brime</p>
     <button class="copystatus btn" onclick="copyToClipboard('p10')">Copy</button>
       <span class="copystatusalert">Copied!</span>
    </div>
    </div>
    <div class="car">
    <div class="latestatus">
     <p id="p11">Cat is better than dog</p>
     <button class="copystatus btn" onclick="copyToClipboard('p11')">Copy</button>
       <span class="copystatusalert">Copied!</span>
    </div>
    <div class="latestatus">
     <p id="p12">Cat is better than dog</p>
     <button class="copystatus btn" onclick="copyToClipboard('p12')">Copy</button>
       <span class="copystatusalert">Copied!</span>
    </div>
    </div>
   </div>
  </div>

我的 html 代码中的复制警报是 <span class="copystatusalert">Copied!</span>。当我单击相应的复制按钮并在几秒钟后消失时，我需要这个元素在几秒钟内可见。请帮助我，并提前感谢。

function copyToClipboard(var1){
  let val = document.getElementById(var1).innerHTML;
  const selBox = document.createElement('textarea');
  selBox.style.position = 'fixed';
  selBox.style.left = '0';
  selBox.style.top = '0';
  selBox.style.opacity = '0';
  selBox.value = val;
  document.body.appendChild(selBox);
  selBox.focus();
  selBox.select();
  document.execCommand('copy');
  document.body.removeChild(selBox);
}
<div class="englishstatus">
       <div class="car">
    <div class="latestatus">
     <p id="p9">life os good when hou have books</p> 
     <button class="copystatus btn" onclick="copyToClipboard('p9')">Copy</button>
       <span class="copystatusalert">Copied!</span>
    </div>
    <div class="latestatus">
     <p id="p10">Google is a open source library. It is a open source by lary page and sergy brime</p>
     <button class="copystatus btn" onclick="copyToClipboard('p10')">Copy</button>
       <span class="copystatusalert">Copied!</span>
    </div>
    </div>
    <div class="car">
    <div class="latestatus">
     <p id="p11">Cat is better than dog</p>
     <button class="copystatus btn" onclick="copyToClipboard('p11')">Copy</button>
       <span class="copystatusalert">Copied!</span>
    </div>
    <div class="latestatus">
     <p id="p12">Cat is better than dog</p>
     <button class="copystatus btn" onclick="copyToClipboard('p12')">Copy</button>
       <span class="copystatusalert">Copied!</span>
    </div>
    </div>
   </div>
  </div>

标签： javascripthtmlscriptingdynamic-html

解决方案

在下面的片段中，我们：

  • 传递发生点击的按钮
  • 找到它附近的跨度
  • 把它藏起来
  • 在几秒钟内安排它的显示
  • 设计 .invisible 类

function copyToClipboard(var1, btn){
  let val = document.getElementById(var1).innerHTML;
  const selBox = document.createElement('textarea');
  selBox.style.position = 'fixed';
  selBox.style.left = '0';
  selBox.style.top = '0';
  selBox.style.opacity = '0';
  selBox.value = val;
  document.body.appendChild(selBox);
  selBox.focus();
  selBox.select();
  document.execCommand('copy');
  document.body.removeChild(selBox);
  let item = btn.parentNode.querySelector(".invisible");
  if (item) {
      item.classList.remove("invisible");
      setTimeout(function() {
          item.classList.add("invisible");
      }, 4000);
  }
}
.invisible {
    display: none;
}
<div class="englishstatus">
       <div class="car">
    <div class="latestatus">
     <p id="p9">life os good when hou have books</p> 
     <button class="copystatus btn" onclick="copyToClipboard('p9', this)">Copy</button>
       <span class="copystatusalert invisible">Copied!</span>
    </div>
    <div class="latestatus">
     <p id="p10">Google is a open source library. It is a open source by lary page and sergy brime</p>
     <button class="copystatus btn" onclick="copyToClipboard('p10', this)">Copy</button>
       <span class="copystatusalert invisible">Copied!</span>
    </div>
    </div>
    <div class="car">
    <div class="latestatus">
     <p id="p11">Cat is better than dog</p>
     <button class="copystatus btn" onclick="copyToClipboard('p11', this)">Copy</button>
       <span class="copystatusalert invisible">Copied!</span>
    </div>
    <div class="latestatus">
     <p id="p12">Cat is better than dog</p>
     <button class="copystatus btn" onclick="copyToClipboard('p12', this)">Copy</button>
       <span class="copystatusalert invisible">Copied!</span>
    </div>
    </div>
   </div>
  </div>

推荐阅读