如何为javascript制作单个ID？

问题描述

您好，我是 javascript 新手，但我尽我所能编写了一个 javascript 来复制 <p></p> 中的文本。但是根据我的 javascript，我需要为不同的 <p></p> 元素保留不同的 id。供参考

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");
      },400);
  }
}

我的HTML

  <div class="Engstatus">
   <h2 class="statusheading">Latest English Status</h2>
<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>

我的 CSS

.invisible {
    display: none;
    animation: slideInFromright 1s ease-in;
}
.copystatusalert{
  position: relative;
  background-color: #18b495;
  color: #ffffff;
  margin-left: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.4s,margin-top 0.4s;
  text-align: center;

我的 CSS 仅供参考。 PLZZ 帮助我先生在这里呆了一个星期并且厌倦了搜索结果。主要是提前谢谢你。

解决方法

那么问题是什么？究竟是什么问题？听起来您已经回答了自己的问题，但不确定自己想要做什么？

在 DOM 中，元素 id 必须是唯一的 - 这不是您可以更改的，对多个元素使用相同的 id 是无效的 HTML。

document.getElementById(id)

返回单个元素。如果 DOM 中有多个具有相同 id 的元素，它只会返回第一个。

如果元素的 id 相同并且您使用 document.getElementById，它怎么知道您想要第一个、第二个还是第三个？

由于您将“this”传递给函数，因此您可以获取传入元素的父元素，然后在该父元素中搜索 p 元素并获取其内部文本。

this.parentElement.getElementsByTagName('p')[0].textContent

这假设只有一个段落元素，并且您的布局将与您在此处显示的一样一致。

或者使用默认事件：

function copyToClipboard(event){
  let val = event.target.parentElement.getElementsByTagName('p')[0].textContent;
  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");
      },400);
  }
}

 <div class="Engstatus">
   <h2 class="statusheading">Latest English Status</h2>
<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">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">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">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">Copy</button>
       <span class="copystatusalert invisible">Copied!</span>
    </div>
    </div>
   </div>
  </div>

更新：为了避免在 html 中设置 onClick，您可以通过 javascript 来完成：

const buttons = document.getElementByClassName("copystatus");
for (const button in buttons) {
  button.onClick = copyToClipboard;
}

这假设“copystatus”类只会在那些按钮上，否则你需要派生自己的选择器，它只会解析你想要的按钮。