我會(huì)進(jìn)入正題我在嘗試什么？： 我嘗試克隆項(xiàng)目，以便每個(gè)項(xiàng)目在單擊時(shí)都會(huì)克隆自身。即使是那些被克隆的。問(wèn)題： 問(wèn)題是，當(dāng)我克隆了 10 個(gè)項(xiàng)目時(shí)，單擊第一個(gè)（原始）項(xiàng)目后，它會(huì)克隆接下來(lái)的 10 個(gè)項(xiàng)目。無(wú)論我已經(jīng)擁有多少個(gè)元素，只有最后一個(gè)（最新的）克隆會(huì)克隆一個(gè)元素。信息： 如果“克隆”函數(shù)末尾沒(méi)有 app()，則只有原始元素添加更多克隆。這是 clondeNode() 的問(wèn)題還是可能是錯(cuò)誤的未對(duì)齊的 addEventListener 問(wèn)題？感謝您提前提供的幫助，馬特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>
2 回答
慕哥9229398
TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超6個(gè)贊
單擊后調(diào)用時(shí)app()，您可以向所有現(xiàn)有元素添加一個(gè)新的事件偵聽(tīng)器，這是對(duì)它們已附加的處理程序的補(bǔ)充。
無(wú)需app在那里調(diào)用，只需將偵聽(tīng)器添加到新創(chuàng)建的克隆即可。
其次，函數(shù)和變量使用相同的名稱。這很令人困惑。
因此以不同的方式命名該變量：
const clonedDiv = div.cloneNode(true);
document.body.appendChild(clonedDiv);
clonedDiv.addEventListener('click', clone);如您所見(jiàn)，您也不需要該箭頭函數(shù)。clone只需作為函數(shù)參數(shù)傳遞即可。
幕布斯6054654
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊
在克隆函數(shù)中，您再次調(diào)用 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
}
這會(huì)以遞歸結(jié)束，因?yàn)槊看螁螕羲紩?huì)添加一個(gè)新的偵聽(tīng)器。
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);
};
- 2 回答
- 0 關(guān)注
- 200 瀏覽
添加回答
舉報(bào)
0/150
提交
取消