javascript - 在 JavaScript 中克隆后 classList.toggle() 不工作

Question

我有以下 div:

<div id="template">

    <label><h1>Enter your title</h1></label>
    <input type="text" name="title[]" placeholder="Enter your title">
    <label><p>Enter your text</p></label>
    <textarea type="text" name="textbox1[]" placeholder="Enter your text"></textarea>

</div>

我克隆这个 div 并使用 JavaScript 附加它。单击按钮时，div 应该通过切换 .open 类打开。

相关的 JavaScript:

function addClonedDiv() {

    var div = document.getElementById('template');
    window.clonedDiv = div.cloneNode(true);
    document.getElementById('otherDiv').appendChild(clonedDiv);
    clonedDiv.firstChild.className = "newDiv";
}

function addIframe() {

    clonedDiv.firstChild.classList.toggle("open");

}

(有两个按钮，一个克隆 div，另一个显示它，默认情况下它是隐藏的，otherDiv 是我要将新 div 附加到的 div。我将 class="newDiv"添加到它，因为我会稍后出于与此问题无关的其他目的需要它，但是，我想将它包括在内，因为我不知道这是否可能是问题)。 CSS 中的 .open 类:

.open {
    visibility: visible;
    width: 100%;
}

但是，当我单击应该显示 div 的按钮时，我在控制台中收到此错误消息:无法读取未定义的属性“切换”。 我不确定为什么新的 div 会未定义以及如何解决这个问题。

我通读了这里的其他问题，说我必须深度克隆 div，我尝试应用它(如您所见)，但我仍然收到相同的错误消息。我知道克隆不会克隆事件处理程序，但我很确定，这不是我的问题所在。

我确实通读了许多其他问题并进行了研究，但是，我无法解决问题。我绝对想用 JavaScript 而不是 jQuery 来解决这个问题。

Answer 1

这里有一些问题(在你的 fiddle 中甚至更多，但由于你似乎已经得到了你引用的错误消息，我将免费修复 fiddle 中的问题)。

错误重现:

function addClonedDiv() {
  var div = document.getElementById('template');
  window.clonedDiv = div.cloneNode(true);
  document.getElementById('otherDiv').appendChild(clonedDiv);
  clonedDiv.firstChild.className = "newDiv";
};
// open is reserved
function open_() {
  console.log(clonedDiv);
  clonedDiv.firstChild.classList.toggle("open");
};

#template {
  visibility: hidden;
}

.newDiv.open {
  visibility: visible;
}

<div id="otherDiv">
  <button onclick="addClonedDiv()">
    Add Item
    </button>
  <button onclick="open_()">
    Open
    </button>
</div>
<div id="template">

  <label><h1>Enter your title</h1></label>
  <input type="text" name="title[]" placeholder="Enter your title">
  <label><p>Enter your text</p></label>
  <textarea type="text" name="textbox1[]" placeholder="Enter your text"></textarea>
</div>

---

所以让我们首先修复错误信息:

clonedDiv.firstChild是一个Node，甚至是一个textNode，代表换行符。因此，您可以为其设置一个属性，但它既不继承自 Element 也不继承自 HTMLElement 原型(prototype)，因此没有 classList 属性。

你要的是clonedDiv.firstElementChild (也在 addCloneDiv 中)。

然后，Node.cloneNode在元素上调用时，将复制元素的所有属性。因此，您的 clonedDiv 也将具有 id="template" 属性。这意味着您的 .newDiv.open 规则的重要性低于 #template 规则。

function addClonedDiv() {
  var div = document.getElementById('template');
  window.clonedDiv = div.cloneNode(true);
  document.getElementById('otherDiv').appendChild(clonedDiv);
  clonedDiv.firstElementChild.className = "newDiv"; // grab the first Element
  clonedDiv.removeAttribute('id'); // ids must be unique per document
};

function open_() {

  clonedDiv.firstElementChild.classList.toggle("open");

};

#template,
.newDiv {
  visibility: hidden;
}

.newDiv.open {
  visibility: visible;
}

<div id="otherDiv">
  <button onclick="addClonedDiv()">
    Add Item
    </button>
  <button onclick="open_()">
    Open
    </button>
</div>
<div id="template">

  <label><h1>Enter your title</h1></label>
  <input type="text" name="title[]" placeholder="Enter your title">
  <label><p>Enter your text</p></label>
  <textarea type="text" name="textbox1[]" placeholder="Enter your text"></textarea>

</div>

现在我不确定这是否真的是您想要发生的事情，但我会让您发现自己。