Estoy buscando una manera de reemplazar el elemento secundario , en el código a continuación, estoy tratando de reemplazar child-div-1 por child-div-2, luego child-div-2 por child-div-3, luego 3 por 1, etc. , en bucle mientras hago clic en un botón. (Este código es un ejemplo, en mi código real dentro de parent-div hay otros 4 divs con 1 elemento de intervalo en cada uno...)
editar: solo un "div principal" a la vez, los otros están en exhibición: ninguno.
EJEMPLO DE CÓDIGO HTML:
<button onclick="replaceContent()"></button> <div class="parent-div"> <div id="child-div-1"> <span>hello</span> </div> </div> <div class="parent-div"> <div id="child-div-2"> <span>world</span> </div> </div> <div class="parent-div"> <div id="child-div-3"> <span>test</span> </div> </div>Ideas y pruebas de JAVASCRIPT:
let parentDiv = document.getElementByClassName('parent-div'); let childOne = document.getElementById('child-div-1'); let childTwo = document.getElementById('child-div-2'); let childThree = document.getElementById('child-div-3'); function replaceContent() { then I am stuck here; }No sé cómo configurar esto: replaceChild(newChild, oldChild);
Gracias por tu ayuda !
usar la propiedad de orden flexible
var cnt = 0; function replaceContent(){ if( (cnt % 2) == 0) document.getElementById("child-div-1").style.order=2; else document.getElementById("child-div-1").style.order=0; cnt++; } .parent-div{ display:flex; flex-direction:column; } <button onclick="replaceContent()"></button> <div class="parent-div"> <div id="child-div-1"> <span>hello</span> </div> <div id="child-div-2"> <span>world</span> </div> <div id="child-div-3"> <span>test</span> </div> </div> var parents = document.getElementsByClassName('parent-div'); var cnt = 0; function replaceContent(){ var idx = cnt % 3 parents[idx].classList.remove("show"); parents[idx].classList.add("hide"); idx = (idx + 1) % 3 parents[idx].classList.remove("hide"); parents[idx].classList.add("show"); cnt++ } .show { display:block; } .hide{ display:none; } <button onclick="replaceContent()"></button> <div class="parent-div"> <div id="child-div"> <span>hello</span> </div> </div> <div class="parent-div hide"> <div id="child-div"> <span>world</span> </div> </div> <div class="parent-div hide"> <div id="child-div"> <span>test</span> </div> </div>