由于 javascript 创建的元素，无法使用 eventListener 更改 css 属性所需数量的元素

Question

我试图在单击“按钮”后更改“gridElement”的背景颜色。

尝试了什么，更改元素的创建方式以稍后包含事件：

cloneNode() // 不适用于 eventListeners，除非您使用 eventDelegation，在这种情况下也没有 parentElement 来委托事件。
jQuery.clone() // 该事件没有直接绑定到“gridElement”，而是绑定到“button”，因此 jQuery.clone() 不会深度复制任何关联的事件。

此外，尝试引用所有 gridElements：

使用 window.globalVarRef = localVar。 // 只引用第一个元素而不是所有元素。

如何修改代码，使 eventListener 更改所有“gridElement”而不仅仅是第一个？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="CSS/main.css">
        <title> Method 1 // appendChild() </title>
    </head>
    <body>
        <div id="container">
            <div id="gridContainer"></div>
        </div> 
        <script>

        const gridContainer = document.getElementById('gridContainer');
       
        function createPixels(){
            let pixels = 256;
            for(let k=0;k<pixels;k++) {
                const gridElement = document.createElement('div');
                gridElement.classList.add('gridElement');
                gridContainer.appendChild(gridElement);
                window.allGridElements = gridElement;
            }
        }       

        createPixels();
        
         
        const button = document.createElement('button');
        button.classList.add('button');
        button.textContent = 'button';
        gridContainer.appendChild(button);

        function changeBkg(){
            window.allGridElements.style.backgroundColor = 'blue';
        }

        button.addEventListener('click', changeBkg);
        </script>
    </body>
</html>

Answer 1

问题出在你的changeBkg函数上。要select 所有具有“gridElement”的class 的元素，您想使用for 循环来查找这些元素，然后更改它们的样式。我向网格元素添加了一些基本的 css 这样我们就可以看到颜色的变化。这能解决您的问题吗？

.gridElement {
width: 100px;
height: 100px;
background: red;
display: inline-block;
margin-right: 10px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="CSS/main.css">
        <title> Method 1 // appendChild() </title>
    </head>
    <body>
        <div id="container">
            <div id="gridContainer"></div>
        </div> 
        <script>

        const gridContainer = document.getElementById('gridContainer');
       
        function createPixels(){
            let pixels = 256;
            for(let k=0;k<pixels;k++) {
                const gridElement = document.createElement('div');
                gridElement.classList.add('gridElement');
                gridContainer.appendChild(gridElement);
                window.allGridElements = gridElement;
            }
        }       

        createPixels();
        
        const button = document.createElement('button');
        button.classList.add('button');
        button.textContent = 'button';
        gridContainer.appendChild(button);

        function changeBkg(){
         var items = document.getElementsByClassName('gridElement');
          for (let i=0; i < items.length; i++) {
            items[i].style.backgroundColor = 'blue';
          }
        }

        button.addEventListener('click', changeBkg);
        </script>
    </body>
</html>

由于 javascript 创建的元素，无法使用 eventListener 更改 css 属性所需数量的元素

cannot change css property of desired amount of elements using eventListener due to elements being created by javascript

html

javascript

css

reference

event-handling

由于 javascript 创建的元素，无法使用 eventListener 更改 css 属性 所需数量的元素

cannot change css property of desired amount of elements using eventListener due to elements being created by javascript

html

javascript

css

reference

event-handling

由于 javascript 创建的元素，无法使用 eventListener 更改 css 属性所需数量的元素