HTML-为<div>中的<div>再现并应用唯一ID

时间：2018-12-21 19:41:34

标签： javascript jquery html css

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

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

Card和可折叠手机都需要使用自己的自定义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>

3 个答案:

答案 0 :(得分：0)

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

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

答案 1 :(得分：0)

如果我对您的理解正确，那么您可能想要这样的东西：

kubeadm version
function createCard(id) {
  const card = document.getElementById('card-prototype').cloneNode(true);
  card.id = `card-${id}`;
  return card;
}

[ createCard(1),
  createCard(2),
  createCard(3),
  createCard(4) ].forEach(card => {
    document.getElementById('cards-container').appendChild(card);
  });
#card-1 {
  color: red;
}
#card-2 {
  color: green;
}
#card-3 {
  color: blue;
}
#card-4 {
  color: purple;
}

以上代码将复制卡并更改ID。

答案 2 :(得分：0)

在附加之前，更改./a.exe和for元素的label属性checkbox的{​​{1}}属性！ 这应该起作用：

id
var myDiv = document.getElementById("Card");
var n=5

for(i=2;i<=n;i++){
  node=myDiv.cloneNode(true)
  node.children[0].id="collapsible"+i
  node.children[1].setAttribute("for","collapsible"+i)
  document.body.appendChild(node);
}
.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;
}

我希望这会有所帮助！

相关问题
最新问题