javascript - HTML - 为 中的 复制和应用唯一 ID

Question

我创建了一个 ID 为“Card”的自定义 div 元素。

Card 还有另一个 ID 为“Collapsible”的 div，其中包含需要 Collapsible ID 的自定义文本。

Card 和 Collapsible 都需要它们自己的自定义 ID，因为我想根据要求复制“Card”元素并使其正常运行。

老实说，我对此完全陌生，所以我在尝试让它按预期工作时遇到了麻烦。

我目前正在使用以下 JS 代码生成一个新的“Card”元素:

var myDiv = document.getElementById("Card");
document.body.appendChild(myDiv.cloneNode(true));
document.body.appendChild(myDiv.cloneNode(true));

问题是，即使“Card”能够正确复制，“Collapsible”却不能，它仍然引用之前的“Collapsible”对象。如果我在每个卡片元素中手动重命名“可折叠”ID，它就可以工作。谁能指出我正确的方向？

我研究过的所有内容都指向我使用某种 Javascript 函数，但关于如何将自定义 ID 应用于另一个 DIV 中的一个 DIV，以及如何引用这些唯一 ID，我没有得到任何结果。

如果其中有任何令人困惑的地方，请告诉我，我会尽力消除任何误解。谢谢大家!

var myDiv = document.getElementById("Card");

document.body.appendChild(myDiv.cloneNode(true));
document.body.appendChild(myDiv.cloneNode(true));

.wrap-collabsible {
  /* Controls the base label's size and appearance */
  margin-bottom: 1.2rem 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 70%, rgba(0, 0, 0, 0.9) 100%), url("https://help.opera.com/wp-content/uploads/sites/2/2018/03/Help_thumb_security@1x.png");
  height: 200px;
  width: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  position: relative;
  
}

input[type='checkbox'] {
  /* Checkbox flags and enables content from CSS */
  display: none;
}

.lbl-toggle {
  /* Controls the "More Info" label */
  display: block;
  width: 100%;
  height: 100%;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  position: relative;
  bottom: 5px;
  right: 5px;
  text-align: bottom;
  color: #FFFFFF;
  cursor: pointer;
  border-radius: 7px;
  transition: all .25s ease-out;
}

.lbl-toggle:hover {
  /* Changes color of labels if mouse hovers */
  color: #808080;
}

.lbl-toggle::before {
  /* Arrow location, size, and base transformation */
  content: ' ';
  
  position: absolute;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: bottom;
  margin-right: 0.5rem;
  transform: translateY(-2px);
  transition: transform .2s ease-out;
  bottom: 11px;
  right: 105px;
  text-align: right;
}

.toggle:checked+.lbl-toggle::before {
  /* Rotates the arrow. */
  transform: rotate(180deg) translateX(-3px) translateY(2px);
}

.collapsible-content {
  width: 0px;
  overflow: hidden;
  transition: width .5s ease-in-out;
  
  position: absolute;
  left: 290px;
  top: 0px;
  z-index:-1;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  width: 400px;
}

.toggle:checked+.lbl-toggle {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.collapsible-content .content-inner {
  /* Controls the Content inside the popup */
  height: 183px;
  background: rgb(128, 128, 128);
  background-image: linear-gradient(to right, rgba(128, 128, 128), rgba(50, 50, 50));
  border-bottom: 1px solid rgba(250, 224, 66, .45);
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 0.5rem 1rem;
  padding-left: 30px;
  box-shadow: inset 0 0 15px #000000;
  
}

.bottomright {
  /* Positions any text to the bottom right */
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

<div id="Card" class="wrap-collabsible">
  <input id="collapsible" class="toggle" type="checkbox">
  <label for="collapsible" class="lbl-toggle"> 
      <div class="bottomright">
        More Info
      </div>
    </label>
  <div class="collapsible-content">
    <div class="content-inner">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
  </div>
</div>

Answer 1

你可以做的是克隆节点并给它一个新的 ID，然后附加它。像这样:

var myDiv = document.getElementById("Card");
var clone = myDiv.cloneNode(true);
clone.id = "UniqueId";
document.body.appendChild(clone);