0
213
ViewsCopia de clon de Javascript clonenode a id con los botones desplegables siguiente anterior
por favor necesito solución para mi programa de diseño, con clonenode/copy
desde un gran div donde el usuario puede elegir lo que tendría en id/contenido concreto, para poder cambiarlo con flechas o elegir del menú desplegable,
pero ahora tengo una solución solo con appenchild de div
y, si el usuario agrega el siguiente contenido, la siguiente identificación, tendrá el mismo gran div / se duplicará para que el archivo sea más grande ...
así que solo necesito tener un gran div desde donde se clonará o copiará a div concreto y este div no se duplicará
muchas gracias por sus respuestas
const dGet = document.getElementById('get') , dBack = document.getElementById('back') , slides = document.querySelectorAll('.mySlides') , slideSelect = document.querySelector('#slide-Selector') , current = { slide : null , index : 0 , len : slides.length }; slideSelect.onchange =()=> { current.index = slideSelect.selectedIndex; plusDivs(0); } // init plusDivs(0); function plusDivs(n) { // more easy with a modulo... current.index = (current.index +n +current.len) % current.len; if (current.slide) dBack.appendChild( current.slide ); current.slide = dGet.appendChild( slides[current.index] ); slideSelect.selectedIndex = current.index; // added } #get { height : 300px; width : 500px; border : 1px solid red; left : 100px; position : absolute; } #back { display : none; } <button onclick="plusDivs(-1)"><</button> <button onclick="plusDivs(1)">></button> <select id="slide-Selector"> <option>slideshow1</option> <option>slideshow2</option> <option>slideshow3</option> </select> <div id="back"> <div id="one" class="mySlides"> <span class="Tx1">slideshow1</span> </div> <div id="two" class="mySlides"> <span class="Tx1">slideshow2</span> </div> <div id="three" class="mySlides"> <span class="Tx1">slideshow3</span> </div> </div> <div id="get"></div>
·
Juan Pablo Isaza
1 answers
Answer question0
removeChild y cloneNode :
const dGet = document.getElementById('get') , dBack = document.getElementById('back') , slides = document.querySelectorAll('.mySlides') , slideSelect = document.querySelector('#slide-Selector') , current = { slide : null , index : 0 , len : slides.length } ; slideSelect.onchange =()=> { current.index = slideSelect.selectedIndex; plusDivs(0); } // init plusDivs(0); function plusDivs(n) { // more easy with a modulo... current.index = (current.index +n +current.len) % current.len; if (current.slide) dGet.removeChild( current.slide ); var clon = slides[current.index].cloneNode(true); current.slide = dGet.appendChild(clon); slideSelect.selectedIndex = current.index; // added } #get { height : 300px; width : 500px; border : 1px solid red; left : 100px; position : absolute; } #back { display : none; } <button onclick="plusDivs(-1)"><</button> <button onclick="plusDivs(1)">></button> <select id="slide-Selector"> <option>slideshow1</option> <option>slideshow2</option> <option>slideshow3</option> </select> <div id="back"> <div id="one" class="mySlides"> <span class="Tx1">slideshow1</span> </div> <div id="two" class="mySlides"> <span class="Tx1">slideshow2</span> </div> <div id="three" class="mySlides"> <span class="Tx1">slideshow3</span> </div> </div> <div id="get"></div>
·
Juan Pablo Isaza
Report
Answer question