classList.thoggle()在JavaScript中克隆后不起作用

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的按钮时，我在控制台中收到了这样的错误消息：无法读取undefined的属性"toggle"。我不知道为什么新的div是未定义的，以及如何修复它。

我仔细阅读了这里的其他问题，这些问题说我必须深度克隆div，我尝试应用它(正如你所看到的)，但我仍然收到了相同的错误消息。我知道克隆不会克隆事件处理程序，但我敢肯定，这不是我的问题所在。

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

Answer 1

这里有一些问题(甚至还有更多问题，但由于您似乎已经收到了您引用的错误消息，我将免费修复小提琴中的问题)。

错误修复：

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原型继承，因此没有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>

现在我不确定这真的是你想要的，但我会让你找到自己。

Answer 2

试试这个：

var clonedDiv;
function clone(){
clonedDiv = document.getElementById('template').cloneNode(true);
document.getElementById('otherDiv').appendChild(clonedDiv);
clonedDiv.className = "newDiv";
}
function show(){
(!clonedDiv.classList.contains("open")) ? clonedDiv.classList.add("open"):clonedDiv.classList.remove("open");
}

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

<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>
<button onclick="clone()">clone</button>
<button onclick="show()">show</button>
</div>
<div id="otherDiv">
</div>

而不是切换