由於元素是由 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 函數。 要選擇具有“gridElement”類的所有元素，您需要使用 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 屬性

問題描述

1 個解決方案

解決方案1
1 已采納 2020-11-22 05:19:46

由於元素是由 javascript 創建的，因此無法使用 eventListener 更改所需元素數量的 css 屬性

問題描述

1 個解決方案

解決方案1 1 已采納 2020-11-22 05:19:46

解決方案1
1 已采納 2020-11-22 05:19:46