0

我会开门见山的

我在尝试什么？： 我尝试克隆项目，以便每个项目在单击时都会克隆自身。甚至那些被克隆的。

问题： 问题是当我克隆了例如 10 个项目时，在单击第一个（原始）项目后，它会克隆接下来的 10 个项目。无论我已经拥有多少元素，只有最后一个（最新的）克隆会克隆一个元素。

信息： “克隆”函数末尾没有 app()，只有原始元素会添加更多克隆。

这是 clondeNode() 的问题，或者可能是错误的未对齐 addEventListener？

提前感谢您的帮助，马特

JS：

app = () => {
    const divs = document.querySelectorAll('.div');

    divs.forEach((div) => {
        div.addEventListener('click', () => clone(event))
    })

}

clone = (event) => {
    const div = event.target;
    const clone = div.cloneNode(true);

    document.body.appendChild(clone)

    app()
}

app()

HTML：

<body>
    <div class='div'>DIV FOR CLONING</div>
    <script src="main.js"></script>
</body>
4

2 回答 2

0

在克隆函数中，您再次调用 app()

app = () => {
    const divs = document.querySelectorAll('.div');

    divs.forEach((div) => {
        div.addEventListener('click', () => clone(event))
    })

}

clone = (event) => {
    const div = event.target;
    const clone = div.cloneNode(true);

    document.body.appendChild(clone)

    app() // <<<<<<-------HERE 
}

以递归结束，因为每次单击它都会添加一个新的侦听器。

https://codesandbox.io/s/agitated-cohen-0j6dm

  const clone = event => {
    const div = event.target;
    const cloned = div.cloneNode(true);
    document.body.appendChild(cloned);
    cloned.addEventListener("click", clone);
  };
于 2020-03-27T20:35:06.013 回答
0

在单击后调用时app()，您会为所有现有元素添加一个新的事件侦听器，这是对它们已经附加到它们的处理程序的补充。

而不是在那里调用app，只需将侦听器添加到新创建的克隆。

其次，您对函数和变量使用相同的名称。这很令人困惑。

所以以不同的方式命名该变量：

const clonedDiv = div.cloneNode(true);
document.body.appendChild(clonedDiv);
clonedDiv.addEventListener('click', clone);

如您所见，您也不需要那个箭头功能。clone只需作为函数参数传递。

于 2020-03-27T20:39:38.263 回答