Próbuję zmienić kolor tła "Element siatki" po kliknięciu "Przycisk".

Co próbowano, zmieniając sposób, w jaki elementy są tworzone, aby później zawierać wydarzenie:

  • Clonenode () // nie działa z EventListeners, chyba że używasz EventDenegation, w tym przypadku nie ma też rodzicielstwa do delegowania wydarzenia.
  • jQuery.Clone () // zdarzenie nie jest związane bezpośrednio do "Gridelement", raczej jest związany z "Przyciskiem", więc jQuery.Clone () nie byłby głębokim kopiowaniem żadnych powiązanych wydarzeń.

Również próba dokonania odniesień do wszystkich gridelelementów:

  • Używane okno.globalvarref = Localvar. // Odnosi się tylko do pierwszego elementu, a nie wszystkie.

Jak mogę zmodyfikować kod, aby Eventlistener zmienia wszystko "Gridelelement", a nie tylko pierwszy?

<!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>
1
lonenigma 22 listopad 2020, 07:54

1 odpowiedź

Najlepsza odpowiedź

Problem polega na funkcji WAGEBKG. Aby wybrać wszystkie elementy z klasą "Gridelement", chcesz użyć A do pętli, aby znaleźć te elementy, a następnie zmienić style. Dodałem podstawowe CSS do elementu siatki, abyśmy mogli zobaczyć zmianę koloru w akcji. Czy to rozwiązuje twój problem?

.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>
1
Xenvi 22 listopad 2020, 05:19