0
224
VistasJavascript mostrar siguiente contenido anterior appenchild
Tengo varios divs con la misma clase y necesito poner solo uno de la clase en alguna identificación. No me muestra el orden correcto. Y también si tendré algún menú desplegable y haré clic en algún div con clase, necesito mostrar esta clase en id. Aquí está mi código, ¿podría ayudarme por favor? Gracias
var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs((slideIndex += n)); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) { slideIndex = 1; } if (n < 1) { slideIndex = x.length; } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; document.getElementById("back").appendChild(x[i]); } x[slideIndex - 1].style.display = "block"; document.getElementById("get").appendChild(x[slideIndex - 1]); } #get { height: 300px; width: 500px; border: 1px solid red; left: 100px; position: absolute; } #get .mySlides { display: block!important } <button onclick="plusDivs(-1)"><</button> <button onclick="plusDivs(1)">></button> <div id="back"> <div id="one" class="mySlides"> <span class="Tx1">111</span> </div> <div id="two" class="mySlides"> <span class="Tx1">222</span> </div> <div id="three" class="mySlides"> <span class="Tx1">333</span> </div> </div> <div id="get"></div>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
En javascript, el índice de elementos primero es cero, no 1.
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 }; // add slideSelect option elements for(let indx=0;indx<slides.length;++indx) slideSelect.add( new Option( `slide : ${indx+1}`, indx)); 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"></select> <div id="back"> <div id="one" class="mySlides"> <span class="Tx1">111</span> </div> <div id="two" class="mySlides"> <span class="Tx1">222</span> </div> <div id="three" class="mySlides"> <span class="Tx1">333</span> </div> </div> <div id="get"></div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta