如何在使用 cloneNode、appendChild 創建的新節點中添加相同的單擊事件。（在 forEach() 語法中）

Question

我的目的是制作一個無限的 imageview function。

所以我成功地使用cloneNode和appendChild添加了相同的動作和新元素，但是新元素中的那個按鈕不適用於相同的點擊事件。

如何將相同的點擊事件添加到新元素？

 let listMarginTop = 70; let listMarginLeft = 40; let list = document.getElementById('firstLine'); let lists = document.getElementsByTagName('li'); let listsArr = [...lists]; let z = 10; let transDelay = 1; let xBtn = document.getElementsByClassName('xBtn'); let xBtnArr = [...xBtn]; for(let i = 0; i < listsArr.length; i++) { listsArr[i].style.transition = 'all 0.5s linear ' + transDelay + 's'; transDelay -= 0.1; listsArr[i].style.zIndex = z; z--; listsArr[i].style.marginTop = listMarginTop + 'vh'; listsArr[i].style.marginLeft = listMarginLeft + 'vw'; listMarginTop -= 6; listMarginLeft -= 6; } let lastChildMarginTop = 12; let lastChildMarginLeft = -20; xBtnArr.forEach((x) => { x.addEventListener('click', () => { let copyWindow = x.parentElement.parentElement.cloneNode(true); x.parentElement.parentElement.style.opacity = '0'; copyWindow.style.marginTop = parseInt(list.lastChild.style.marginTop) - 6 + 'vh'; copyWindow.style.marginLeft = parseInt(list.lastChild.style.marginLeft) - 6 + 'vw'; copyWindow.style.zIndex = z; z--; lastChildMarginTop -= 6; lastChildMarginLeft -= 6; list.appendChild(copyWindow); let listChildArr = [...list.childNodes]; listChildArr.forEach(win => { win.style.marginTop = parseInt(win.style.marginTop) + 6 + 'vh'; win.style.marginLeft = parseInt(win.style.marginLeft) + 6 + 'vw'; }) xBtn = document.getElementsByClassName('xBtn'); xBtnArr = [...xBtn]; console.log(xBtnArr); }) })

 * {margin: 0; padding: 0; border: 0;} ul { list-style-type: none; position: relative; }.rightMain { height: 100vh; flex: 7; flex-wrap: wrap; overflow: hidden; } #container { position: absolute; z-index: 3; } ul li { margin-top: -10vh; margin-left: -10vw; position: absolute; }.showWindow { width: 25vw; height: 25vh; border: 1px solid black; background-color: white; }.showWindow button { margin: 0.5vw 0.5vw 0; width: 1vw; height: 1vw; border-radius: 50%; border: 1px solid black; background-color: white; cursor: pointer; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <div id='rightMain' className='rightMain'> <div id="container"> <ul id='firstLine'> <li> <div className='showWindow'> <button className='xBtn'></button> <button></button> </div> </li> <li> <div className='showWindow'> <button className='xBtn'></button> <button></button> </div> </li> <li> <div className='showWindow'> <button className='xBtn'></button> <button></button> </div> </li> <li> <div className='showWindow'> <button className='xBtn'></button> <button></button> </div> </li> <li> <div className='showWindow'> <button className='xBtn'></button> <button></button> </div> </li> <li> <div className='showWindow'> <button className='xBtn'></button> <button></button> </div> </li> <li> <div className='showWindow'> <button className='xBtn'></button> <button></button> </div> </li> <li> <div className='showWindow'> <button className='xBtn'></button> <button></button> </div> </li> <li> <div className='showWindow'> <button className='xBtn'></button> <button></button> </div> </li> <li> <div className='showWindow'> <button className='xBtn'></button> <button></button> </div> </li> </ul> </div> </div> </body> </html>

Answer 1

您必須在這里解決兩個問題-

HTML 元素上沒有className屬性。 您必須在每個元素上將其更改為class以便它接受正確的 class 並且您能夠使用getElementsByClassName()正確地 select DOM 方法節點（）
由於您有創建無限圖像視圖的願景，並且無需為每個按鈕添加如此多的單獨事件偵聽器，您可以使用事件委托。 您可以在此處找到解釋的事件委托。 這將幫助您提高應用程序性能。

如何在使用 cloneNode、appendChild 創建的新節點中添加相同的單擊事件。（在 forEach() 語法中）

問題描述

1 個解決方案

解決方案1
0 2021-06-09 16:50:59

如何在使用 cloneNode、appendChild 創建的新節點中添加相同的單擊事件。 （在 forEach() 語法中）

問題描述

1 個解決方案

解決方案1 0 2021-06-09 16:50:59

如何在使用 cloneNode、appendChild 創建的新節點中添加相同的單擊事件。（在 forEach() 語法中）

解決方案1
0 2021-06-09 16:50:59