Estoy haciendo una lista de div alterna en javascript. Tengo dos requisitos:
Puedo cumplir con el primer requisito, pero me quedé atascado en el segundo (transición de fila a columna y de columna a fila con cada clic). Además, no soy bueno en CSS, por lo que no puedo hacerlo usando CSS.
const btn = document.querySelector('#divChanger'); const mainDiv = document.querySelector('.mainDiv'); for (let index = 0; index < 20; index++) { mainDiv.innerHTML += `<div class="myDiv"> Div ${index + 1} </div>`; } const selectedDiv = document.querySelectorAll('.myDiv'); var counter = 0; selectedDiv.forEach(element => { if (counter++ % 2) { element.style.color = 'red'; } else { element.style.color = 'blue'; } element.style.fontSize = '14px'; }); btn.addEventListener('click', function() { selectedDiv.forEach(element => { element.style.color = element.style.color == 'red' ? 'blue' : 'red'; }); }); <div class="mainDiv"> </div> <div> <button id="divChanger">Change</button> </div>Simplemente configure su element.style.float = element.style.float == 'left' ? 'none' : 'left'; dentro de su eventListener .
También agregué maring , solo para una mejor perspectiva
const btn = document.querySelector('#divChanger'); const mainDiv = document.querySelector('.mainDiv'); for (let index = 0; index < 20; index++) { mainDiv.innerHTML += `<div class="myDiv"> Div ${index + 1} </div>`; } const selectedDiv = document.querySelectorAll('.myDiv'); var counter = 0; selectedDiv.forEach(element => { if (counter++ % 2) { element.style.color = 'red'; } else { element.style.color = 'blue'; } element.style.fontSize = '14px'; }); btn.addEventListener('click', function() { selectedDiv.forEach(element => { element.style.color = element.style.color == 'red' ? 'blue' : 'red'; element.style.float = element.style.float == 'left' ? 'none' : 'left'; element.style.margin = "2,0"; }); }); <div class="mainDiv"> </div> <div> <button id="divChanger">Change</button> </div>